55 lines
2.3 KiB
Vue
55 lines
2.3 KiB
Vue
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 1 861 4072 54 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||
<template>
|
||
<view class="fui-wrap">
|
||
<view class="fui-page__hd">
|
||
<view class="fui-page__title">Text</view>
|
||
<view class="fui-page__desc">Text 文本，用于包裹文本内容。</view>
|
||
</view>
|
||
<view class="fui-page__bd fui-page__spacing">
|
||
<view class="fui-section__title">基本使用</view>
|
||
<fui-text :text="text" :size="28"></fui-text>
|
||
<view class="fui-section__title">不同样式类型</view>
|
||
<fui-text text="primary" type="primary"></fui-text>
|
||
<fui-text text="success" type="success"></fui-text>
|
||
<fui-text text="warning" type="warning"></fui-text>
|
||
<fui-text text="danger" type="danger"></fui-text>
|
||
<fui-text text="purple" type="purple"></fui-text>
|
||
<fui-text text="gray" type="gray"></fui-text>
|
||
<fui-text text="black" type="black"></fui-text>
|
||
<view class="fui-section__title">块状 | 自定义颜色</view>
|
||
<fui-text text="block" color="brown" block></fui-text>
|
||
<fui-text text="yellow" color="yellow" block></fui-text>
|
||
<view class="fui-section__title">数据脱敏-姓名</view>
|
||
<fui-text text="张三" text-type="name" format block></fui-text>
|
||
<fui-text text="王小仙" text-type="name" format block></fui-text>
|
||
<view class="fui-section__title">数据脱敏-手机号</view>
|
||
<fui-text text="13544339908" text-type="mobile" format></fui-text>
|
||
<view class="fui-section__title">金额格式化</view>
|
||
<fui-text text="20000" text-type="amount" format>￥</fui-text>
|
||
<view class="fui-section__title">点击效果</view>
|
||
<fui-text text="https://firstui.cn" highlight @click="handleClick"></fui-text>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
text: 'First UI是一套超高性能、超高颜值的移动端UI综合解决方案，包含业内顶尖的组件库、强大的功能库、丰富精美的模板库，提供uni-app(完美支持nvue)、微信小程序、支付宝小程序等版本，兼顾高效率与高性能，让您的开发获得百倍提质提速！'
|
||
}
|
||
},
|
||
methods: {
|
||
handleClick(e) {
|
||
console.log(e)
|
||
this.fui.toast('点击了~');
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.fui-wrap {
|
||
padding-bottom: 96rpx;
|
||
}
|
||
</style> |