mirror of
https://github.com/ialley-workshop-open/uni-halo.git
synced 2026-06-12 13:19:31 +08:00
v1.0.0-beta 源码正式开源
This commit is contained in:
小莫唐尼
@@ -0,0 +1,210 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user