44 <view class =" u-demo-title" >演示效果</view >
55 <view class =" u-demo-area" >
66 <u-toast ref =" uToast" ></u-toast >
7- <u-tag :text =" text" :type =" type" :shape =" shape" :closeable =" closeable" :mode =" mode"
8- @close =" close" @click =" click" :show =" show" :size =" size" />
7+ <u-tag :text =" text" :type =" type" :shape =" shape" :closeable =" closeable" :mode =" mode" @close =" close" @click =" click" :show =" show" :size =" size" />
98 </view >
109 </view >
1110 <view class =" u-config-wrap" >
12- <view class =" u-config-title u-border-bottom" >
13- 参数配置
14- </view >
11+ <view class =" u-config-title u-border-bottom" >参数配置</view >
1512 <view class =" u-config-item" >
1613 <view class =" u-item-title" >模式选择</view >
1714 <u-subsection vibrateShort :list =" ['light', 'dark', 'plain']" @change =" modeChange" ></u-subsection >
4138</template >
4239
4340<script >
44- export default {
45- data () {
46- return {
47- text: ' 蒹葭苍苍' ,
48- mode: ' light' ,
49- type: ' error' ,
50- size: ' default' ,
51- shape: ' square' ,
52- closeable: true ,
53- show: true
54- }
41+ export default {
42+ data () {
43+ return {
44+ text: ' 蒹葭苍苍' ,
45+ mode: ' light' ,
46+ type: ' error' ,
47+ size: ' default' ,
48+ shape: ' square' ,
49+ closeable: true ,
50+ show: true
51+ };
52+ },
53+ methods: {
54+ modeChange (index ) {
55+ this .mode = index == 0 ? ' light' : index == 1 ? ' dark' : ' plain' ;
56+ },
57+ textChange (index ) {
58+ this .text = index == 0 ? ' 蒹葭苍苍' : index == 1 ? ' 白露为霜' : ' 在水一方' ;
59+ },
60+ typeChange (index ) {
61+ this .type = index == 0 ? ' primary' : index == 1 ? ' success' : index == 2 ? ' error' : index == 3 ? ' warning' : ' info' ;
62+ },
63+ shapeChange (index ) {
64+ this .shape = index == 0 ? ' square' : index == 1 ? ' circle' : index == 2 ? ' circleLeft' : ' circleRight' ;
65+ },
66+ sizeChange (index ) {
67+ this .size = index == 0 ? ' default' : ' mini' ;
68+ },
69+ closeableChange (index ) {
70+ this .closeable = index == 0 ? true : false ;
71+ },
72+ click (index ) {
73+ this .$refs .uToast .show ({
74+ title: ` 第${ index + 1 } 个标签被点击` ,
75+ type: ' success'
76+ });
5577 },
56- methods: {
57- modeChange (index ) {
58- this .mode = index == 0 ? ' light' : index == 1 ? ' dark' : ' plain' ;
59- },
60- textChange (index ) {
61- this .text = index == 0 ? ' 蒹葭苍苍' : index == 1 ? ' 白露为霜' : ' 在水一方' ;
62- },
63- typeChange (index ) {
64- this .type = index == 0 ? ' primary' : index == 1 ? ' success' : index == 2 ? ' error' : index == 3 ? ' warning' : ' info' ;
65- },
66- shapeChange (index ) {
67- this .shape = index == 0 ? ' square' : index == 1 ? ' circle' : index == 2 ? ' circleLeft' : ' circleRight' ;
68- },
69- sizeChange (index ) {
70- this .size = index == 0 ? ' default' : ' mini' ;
71- },
72- closeableChange (index ) {
73- this .closeable = index == 0 ? true : false ;
74- },
75- click (index ) {
76- this .$refs .uToast .show ({
77- title: ` 第${ index + 1 } 个标签被点击` ,
78- type: ' success'
79- })
80- },
81- close (index ) {
82- this .$refs .uToast .show ({
83- title: ` 关闭图标被点击` ,
84- type: ' success'
85- })
86- },
78+ close (index ) {
79+ this .$refs .uToast .show ({
80+ title: ` 关闭图标被点击` ,
81+ type: ' success'
82+ });
8783 }
8884 }
85+ };
8986 </script >
9087
9188<style lang="scss" scoped>
92- .u-demo {}
93- </style >
89+ .u-demo {
90+ }
91+ </style >
0 commit comments