no message
Former-commit-id: 662fa77db90f556f7b9f4ea87c1637a0097a0cdf Former-commit-id: bc48fd53d686d3706032b288b05d29522869ea25 Former-commit-id: 78e529b7f64e50c3fd33f0372b35c16fa42c1c15
This commit is contained in:
@@ -1 +1 @@
|
||||
d39351bf9b78b7abf9eecac82779085241498e19
|
||||
762198f6b192d9faef94d5eab316518f842f9c88
|
||||
@@ -1 +1 @@
|
||||
3227029199618757411bbdf199af6fdaa9d25e01
|
||||
183e2862510cac25d289c2d00765144d685eb6fa
|
||||
@@ -3,7 +3,7 @@
|
||||
<el-popover
|
||||
ref="pop"
|
||||
v-model="pop"
|
||||
placement="bottom"
|
||||
:placement="placement"
|
||||
width="300"
|
||||
trigger="click">
|
||||
<div class="header dd-clearfix dd-mb-10" v-if="clearable">
|
||||
@@ -24,7 +24,7 @@
|
||||
</el-row>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
<div v-if="searchMode" class="group long">
|
||||
<div v-if="searchMode" class="group">
|
||||
<div class="class" v-for="(item, index) in iconFilted" :key="index">
|
||||
<div class="class-title">{{item.title}}</div>
|
||||
<el-row class="class-row">
|
||||
@@ -62,26 +62,37 @@
|
||||
import icon from '@/assets/library/font-awesome-4.7.0-icon/icon.js'
|
||||
export default {
|
||||
props: {
|
||||
// 值
|
||||
value: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: ''
|
||||
},
|
||||
// 占位符
|
||||
placeholder: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: '请选择'
|
||||
},
|
||||
// 弹出界面的方向
|
||||
placement: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: 'right'
|
||||
},
|
||||
// 是否可清空
|
||||
clearable: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: true
|
||||
},
|
||||
// 是否允许用户输入
|
||||
userInput: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
// 是否在选择后自动关闭
|
||||
autoClose: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
@@ -154,9 +165,6 @@ export default {
|
||||
overflow-y: scroll;
|
||||
border-top: none;
|
||||
border-bottom: none;
|
||||
&.long {
|
||||
max-height: 600px;
|
||||
}
|
||||
.class {
|
||||
.class-title {
|
||||
line-height: 30px;
|
||||
|
||||
@@ -1,47 +1,27 @@
|
||||
<template>
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="8">
|
||||
<el-card class="dd-mb">
|
||||
<div class="title-group">
|
||||
<p class="title">一般用法</p>
|
||||
<p class="sub-title">
|
||||
icon = {{icon || '未选择'}}
|
||||
<i v-if="icon" :class="'fa fa-' + icon"></i>
|
||||
</p>
|
||||
</div>
|
||||
<IconSelect v-model="icon"></IconSelect>
|
||||
<div class="title-group">
|
||||
<p class="title">不可以清空</p>
|
||||
<p class="sub-title">
|
||||
icon2 = {{icon2 || '未选择'}}
|
||||
<i v-if="icon2" :class="'fa fa-' + icon2"></i>
|
||||
</p>
|
||||
</div>
|
||||
<IconSelect v-model="icon2" :clearable="false"></IconSelect>
|
||||
<div class="title-group">
|
||||
<p class="title">不自动关闭</p>
|
||||
<p class="sub-title">
|
||||
icon3 = {{icon3 || '未选择'}}
|
||||
<i v-if="icon3" :class="'fa fa-' + icon3"></i>
|
||||
</p>
|
||||
</div>
|
||||
<IconSelect v-model="icon3" :auto-close="false"></IconSelect>
|
||||
<div class="title-group">
|
||||
<p class="title">用户可以输入</p>
|
||||
<p class="sub-title">
|
||||
icon4 = {{icon4 || '未选择'}}
|
||||
<i v-if="icon4" :class="'fa fa-' + icon4"></i>
|
||||
</p>
|
||||
</div>
|
||||
<IconSelect v-model="icon4" :user-input="true"></IconSelect>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="16">
|
||||
<el-card>
|
||||
<Markdown url="/static/markdownFiles/article/图标选择组件使用方法.md"></Markdown>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<Container type="ghost">
|
||||
<el-card class="dd-mb">
|
||||
<div class="title-group">
|
||||
<p class="title">一般用法</p>
|
||||
<p class="sub-title">
|
||||
icon = {{icon || '未选择'}}
|
||||
<i v-if="icon" :class="'fa fa-' + icon"></i>
|
||||
</p>
|
||||
</div>
|
||||
<IconSelect v-model="icon"></IconSelect>
|
||||
<div class="title-group">
|
||||
<p class="title">用户可以输入</p>
|
||||
<p class="sub-title">
|
||||
icon2 = {{icon2 || '未选择'}}
|
||||
<i v-if="icon2" :class="'fa fa-' + icon2"></i>
|
||||
</p>
|
||||
</div>
|
||||
<IconSelect v-model="icon2" :user-input="true"></IconSelect>
|
||||
</el-card>
|
||||
<el-card>
|
||||
<Markdown url="/static/markdownFiles/article/组件 - 图标选择器.md"></Markdown>
|
||||
</el-card>
|
||||
</Container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -49,9 +29,7 @@ export default {
|
||||
data () {
|
||||
return {
|
||||
icon: '',
|
||||
icon2: '',
|
||||
icon3: '',
|
||||
icon4: ''
|
||||
icon2: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -70,7 +70,7 @@ export const menu = {
|
||||
component: resolve => { require(['@/pages/demo/plugins/font-awesome/list.vue'], resolve) }
|
||||
},
|
||||
{
|
||||
title: '选择控件',
|
||||
title: '图标选择器',
|
||||
icon: 'file-o',
|
||||
path: 'font-awesome/select',
|
||||
name: 'demo-font-awesome-select',
|
||||
|
||||
Reference in New Issue
Block a user