97 lines
2.8 KiB
Python
97 lines
2.8 KiB
Python
<template>
|
||
<view class="u-demo">
|
||
<view class="u-demo-wrap">
|
||
<view class="u-demo-title">演示效果</view>
|
||
<view class="u-demo-area">
|
||
<u-toast ref="uToast"></u-toast>
|
||
<u-search v-model="value" @change="change" @custom="custom" @search="search" :shape="shape" :clearabled="clearabled"
|
||
:show-action="showAction" :input-align="inputAlign" @clear="clear"></u-search>
|
||
</view>
|
||
</view>
|
||
<view class="u-config-wrap">
|
||
<view class="u-config-title u-border-bottom">
|
||
参数配置
|
||
</view>
|
||
<view class="u-config-item">
|
||
<view class="u-item-title">初始值</view>
|
||
<u-subsection vibrateShort :list="['空', '天山雪莲']" @change="valueChange"></u-subsection>
|
||
</view>
|
||
<view class="u-config-item">
|
||
<view class="u-item-title">搜索框形状</view>
|
||
<u-subsection vibrateShort :list="['圆形', '方形']" @change="shapeChange"></u-subsection>
|
||
</view>
|
||
<view class="u-config-item">
|
||
<view class="u-item-title">清除控件</view>
|
||
<u-subsection vibrateShort :list="['启用', '关闭']" @change="clearabledChange"></u-subsection>
|
||
</view>
|
||
<view class="u-config-item">
|
||
<view class="u-item-title">右侧控件</view>
|
||
<u-subsection vibrateShort :list="['启用', '关闭']" @change="showActionChange"></u-subsection>
|
||
</view>
|
||
<view class="u-config-item">
|
||
<view class="u-item-title">水平对齐方式</view>
|
||
<u-subsection vibrateShort :list="['左', '中', '右']" @change="inputAlignChange"></u-subsection>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
value: '',
|
||
shape: 'round',
|
||
clearabled: true,
|
||
showAction: true,
|
||
inputAlign: 'left'
|
||
}
|
||
},
|
||
watch: {
|
||
// 这里的演示为证明通过v-model绑定值，它是双向绑定的，意味着您无需监听change事件
|
||
// 也能知道value值当前的内容
|
||
value(val) {
|
||
// console.log(val);
|
||
}
|
||
},
|
||
methods: {
|
||
valueChange(index) {
|
||
this.value = index == 0 ? '' : '天山雪莲';
|
||
},
|
||
shapeChange(index) {
|
||
this.shape = index == 0 ? 'round' : 'square';
|
||
},
|
||
clearabledChange(index) {
|
||
this.clearabled = index == 0 ? true : false;
|
||
},
|
||
showActionChange(index) {
|
||
this.showAction = index == 0 ? true : false;
|
||
},
|
||
inputAlignChange(index) {
|
||
this.inputAlign = index == 0 ? 'left' : index == 1 ? 'center' : 'right';
|
||
},
|
||
change(value) {
|
||
// 搜索框内容变化时，会触发此事件，value值为输入框的内容
|
||
//console.log(value);
|
||
},
|
||
custom(value) {
|
||
//console.log(value);
|
||
this.$u.toast('输入值为：' + value)
|
||
},
|
||
search(value) {
|
||
this.$refs.uToast.show({
|
||
title: '搜索内容为：' + value,
|
||
type: 'success'
|
||
})
|
||
},
|
||
clear() {
|
||
// console.log(this.value);
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.u-demo {}
|
||
</style>
|