<template> <view class="tm-search fulled py-12" :class="[ black_tmeme?'grey-darken-5':bgColor, `shadow-${shadow}` ]" > <view @click="$emit('click')" class="tm-search-body flex-around"> <view v-if="showLeft" class="flex-shrink pl-32 flex-center"> <slot name="left"> <tm-icons @click="$emit('cancel')" :black="black_tmeme" :color="color_tmeme" dense :name="leftIcon"></tm-icons> </slot> </view> <view class="flex-between fulled py-10 mx-32" :class="[ black_tmeme?' grey-darken-5':'grey-lighten-4', `round-${round}` ]"> <view v-if="prefixText" class="px-16 flex-shrink flex-center text-size-n text-grey"> {{prefixText}} </view> <view v-if="prefixIcon" class="pl-16 flex-shrink flex-center"> <tm-icons :black="black_tmeme" :color="insertColor_thmeme" dense :name="prefixIcon"></tm-icons> </view> <input @focus="$emit('focus',$event)" @blur="$emit('blur',$event)" confirm-type="search" type="search" @confirm="confirm" v-model="valData" :disabled="disabled" :placeholder="placeholder" class="flat fulled text-size-n pl-16 py-4 tm-search-body-searc" :class="[`text-align-${align}`]" /> <view v-if="clear&&valData.length>0" class="px-16 flex-shrink flex-center"> <tm-icons @click="valData='';$emit('clear',valData)" :size="24" :black="black_tmeme" :color="insertColor_thmeme" dense name="icon-times"></tm-icons> </view> <view v-if="suffixIcon" class="px-16 flex-shrink flex-center"> <slot name="suffixIcon"> <tm-icons @click="confirm" :black="black_tmeme" :color="insertColor_thmeme" dense :name="suffixIcon"></tm-icons> </slot> </view> </view> <view @click="confirm" v-if="showRight" class="flex-shrink mr-32 text-size-n" :class="[ `text-${color_tmeme}` ]"> <slot name="right"> <text class="text-size-n">{{confirmText}}</text> </slot> </view> </view> </view> </template> <script> /** * 搜索框 * @property {String} value = [] 默认:'',建议valu.sync或者v-model双向绑定输入的词。 * @property {Boolean} disabled = [true|false] 默认:false,是否禁用。 * @property {String} left-icon = [] 默认:icon-angle-left,左边图标名称。 * @property {String} prefix-text = [] 默认:'',输入框内前缀文字。 * @property {String} prefix-icon = [] 默认:'icon-search',输入框内前缀图标。 * @property {String} insert-color = [] 默认:'primary',输入框内图标的主题色。 * @property {String} suffix-icon = [] 默认:'',输入框内后缀图标。 * @property {Boolean} show-left = [true|false] 默认:false,是否显示左边部分 * @property {String} confirm-text = [] 默认:搜索, 右边文字 * @property {Boolean} show-right = [] 默认:true ,是否显示右边 * @property {String} color = [] 默认:primary , 外部图标文字的主题色。 * @property {String} bg-color = [] 默认:white , 搜索框的背景。 * @property {Boolean} black = [true|false] 默认:null , 是否暗黑模式 * @property {Boolean} clear = [true|false] 默认:false , 是否显示清除图标 * @property {Number} round = [] 默认:2 , 输入框内圆角。 * @property {Number} shadow = [] 默认:2 , 搜索框的投影 * @property {String} placeholder = [] 默认:'请输入关键词' , 输入框的点位符 * @property {String} align = [left|right|center] 默认:'left' , 输入框输入对齐的方式。 * @property {Function} cancel 点击左边图标产生的事件。 * @property {Function} clear 点击清除图标时触发相关事件。 * @property {Function} confirm 输入法键盘上点击确认,输入框后缀图标,右边部分点击时产生的事件,含当前输入的内容。 * @property {Function} click 点击整体组件的事件。 */ import tmIcons from "@/tm-vuetify/components/tm-icons/tm-icons.vue" export default { components:{tmIcons}, name:"tm-search", model:{ prop:'value', event:'input' }, props:{ clear:{ type:Boolean, default:false }, value:{ type:String, default:'' }, disabled:{ type:Boolean|String, default:false }, leftIcon:{ type:String, default:'icon-angle-left' }, // 输入框内的前缀文字 prefixText:{ type:String, default:'' }, //输入框内的前缀图标。 prefixIcon:{ type:String, default:'icon-search' }, // 输入框内部主题 insertColor:{ type:String, default:'primary' }, //输入框内的后缀图标。 suffixIcon:{ type:String, default:'' }, showLeft:{ type:Boolean, default:false }, confirmText:{ type:String, default:'搜索' }, showRight:{ type:Boolean, default:true }, color:{ type:String, default:'primary' }, bgColor:{ type:String, default:'white' }, black:{ type:Boolean|String, default:null }, round:{ type:Number, default:2 }, shadow:{ type:Number, default:4 }, placeholder:{ type:String, default:"请输入" }, align:{ type:String, default:'left' //left|right|center }, // 跟随主题色的改变而改变。 fllowTheme:{ type:Boolean|String, default:true } }, computed:{ black_tmeme: function() { if (this.black !== null) return this.black; return this.$tm.vx.state().tmVuetify.black; }, color_tmeme:function(){ if(this.$tm.vx.state().tmVuetify.color!==null&&this.$tm.vx.state().tmVuetify.color && this.fllowTheme){ return this.$tm.vx.state().tmVuetify.color; } return this.color; }, insertColor_thmeme:function(){ if(this.$tm.vx.state().tmVuetify.color!==null&&this.$tm.vx.state().tmVuetify.color && this.fllowTheme){ return this.$tm.vx.state().tmVuetify.color; } return this.insertColor; }, valData:{ get:function(){ return this.value; }, set:function(val){ this.$emit('input',val) } } }, data() { return { }; }, methods: { confirm(e) { this.$emit('confirm',this.value) } }, } </script> <style lang="scss" scoped> .tm-search-body-searc{ -webkit-appearance: none !important; } </style>