🐛(tooltip / select): 优化 select 自定义选项与 tooltip 边缘三角方向问题

This commit is contained in:
就眠儀式
2022-11-10 00:48:59 +08:00
parent c651e7f61c
commit 01400f38e5
8 changed files with 63 additions and 18 deletions

View File

@@ -16,7 +16,7 @@
<lay-select v-model="value">
<lay-select-option :value="1" label="学习"></lay-select-option>
<lay-select-option :value="2" label="编码"></lay-select-option>
<lay-select-option :value="3" v-if="true">运动</lay-select-option>
<lay-select-option :value="3" label="运动"></lay-select-option>
</lay-select>
</template>
@@ -47,7 +47,7 @@ export default {
<lay-select-option :value="2" label="编码"></lay-select-option>
<lay-select-option :value="3" label="运动"></lay-select-option>
</lay-select>
<lay-button @click="change2"> change {{value2}}</lay-button>
<lay-button @click="change2"> change {{value2}} </lay-button>
</lay-space>
</template>
@@ -117,15 +117,15 @@ export default {
<template>
<lay-space>
<lay-select v-model="value3" :show-search="true" @search="search">
<lay-select v-model="value3" :show-search="true">
<lay-select-option value="1" label="学习"></lay-select-option>
<lay-select-option value="2" label="编码"></lay-select-option>
<lay-select-option value="3" :label="null"></lay-select-option>
<lay-select-option value="3" label="运动"></lay-select-option>
</lay-select>
<lay-select v-model="value4" :show-search="true" :multiple="true" @search="search">
<lay-select v-model="value4" :show-search="true" :multiple="true">
<lay-select-option value="1" label="学习"></lay-select-option>
<lay-select-option value="2" label="编码"></lay-select-option>
<lay-select-option value="3" :label="null"></lay-select-option>
<lay-select-option value="3" label="运动"></lay-select-option>
</lay-select>
</lay-space>
</template>
@@ -290,6 +290,35 @@ export default {
</script>
:::
::: title 定制选项
:::
::: demo 使用 `lay-select` 标签, 创建下拉选择框
<template>
<lay-select v-model="value">
<lay-select-option :value="1" label="学习"></lay-select-option>
<lay-select-option :value="2" label="编码"></lay-select-option>
<lay-select-option :value="3" label="运动">运动</lay-select-option>
</lay-select>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const value = ref(null);
return {
value
}
}
}
</script>
:::
::: title Select 属性
:::

View File

@@ -84,21 +84,21 @@ export default {
<template>
<div style="padding: 100px;max-width:400px;">
<div style="text-align: center;">
<lay-tooltip content="假装这里有文字提示">
<lay-tooltip trigger="click" content="假装这里有文字提示">
<lay-button>上边</lay-button>
</lay-tooltip>
</div>
<div>
<lay-tooltip content="假装这里有文字提示假装这里有文字提示假装这里有文字提示假装这里有文字提示假装这里有文字提示" position="left">
<lay-tooltip trigger="click" content="假装这里有文字提示假装这里有文字提示假装这里有文字提示假装这里有文字提示假装这里有文字提示" position="left">
<lay-button style="float:left;">左边</lay-button>
</lay-tooltip>
<lay-tooltip content="假装这里有文字提示假装这里有文字提示假装这里有文字提示假装这里有文字提示假装这里有文字提示" position="right">
<lay-tooltip trigger="click" content="假装这里有文字提示假装这里有文字提示假装这里有文字提示假装这里有文字提示假装这里有文字提示" position="right">
<lay-button style="float:right;">右边</lay-button>
</lay-tooltip>
<div style="clear: both;"></div>
</div>
<div style="text-align: center;">
<lay-tooltip content="假装这里有文字提示假装这里有文字提示假装这里有文字提示假装这里有文字提示" position="bottom">
<lay-tooltip trigger="click" content="假装这里有文字提示假装这里有文字提示假装这里有文字提示假装这里有文字提示" position="bottom">
<lay-button>下边</lay-button>
</lay-tooltip>
</div>

View File

@@ -260,6 +260,8 @@ export default {
| disabledPreview | 设置文件预览插槽区域为禁用状态 | boolean | false | -- |
| cut | 是否开启选择图片后检测,设置true可开启 | boolean | false | -- |
| cutOptions | 开启剪裁的模态弹窗与剪裁框的配置 | object | { layerOption,copperOption } | -- |
| text | 普通上传描述 | string | -- | -- |
| dragText | 拖拽上传描述 | string | -- | -- |
:::