first commit
This commit is contained in:
PC-202306242200\Administrator
83
unpackage/dist/dev/mp-weixin/uni_modules/wot-design-uni/components/wd-search/types.js
vendored
Normal file
83
unpackage/dist/dev/mp-weixin/uni_modules/wot-design-uni/components/wd-search/types.js
vendored
Normal file
@@ -0,0 +1,83 @@
|
||||
"use strict";
|
||||
const uni_modules_wotDesignUni_components_common_props = require("../common/props.js");
|
||||
const searchProps = {
|
||||
...uni_modules_wotDesignUni_components_common_props.baseProps,
|
||||
customInputClass: uni_modules_wotDesignUni_components_common_props.makeStringProp(""),
|
||||
/**
|
||||
* 输入框内容，双向绑定
|
||||
* 类型: string
|
||||
* 默认值: ''
|
||||
*/
|
||||
modelValue: uni_modules_wotDesignUni_components_common_props.makeStringProp(""),
|
||||
/**
|
||||
* 是否使用输入框右侧插槽
|
||||
* 类型: boolean
|
||||
* 默认值: false
|
||||
* @deprecated 该属性已废弃，将在下一个minor版本被移除，直接使用插槽即可
|
||||
*/
|
||||
useSuffixSlot: uni_modules_wotDesignUni_components_common_props.makeBooleanProp(false),
|
||||
/**
|
||||
* 搜索框占位文本
|
||||
* 类型: string
|
||||
*/
|
||||
placeholder: String,
|
||||
/**
|
||||
* 搜索框右侧文本
|
||||
* 类型: string
|
||||
*/
|
||||
cancelTxt: String,
|
||||
/**
|
||||
* 搜索框亮色（白色）
|
||||
* 类型: boolean
|
||||
* 默认值: false
|
||||
*/
|
||||
light: uni_modules_wotDesignUni_components_common_props.makeBooleanProp(false),
|
||||
/**
|
||||
* 是否隐藏右侧文本
|
||||
* 类型: boolean
|
||||
* 默认值: false
|
||||
*/
|
||||
hideCancel: uni_modules_wotDesignUni_components_common_props.makeBooleanProp(false),
|
||||
/**
|
||||
* 是否禁用搜索框
|
||||
* 类型: boolean
|
||||
* 默认值: false
|
||||
*/
|
||||
disabled: uni_modules_wotDesignUni_components_common_props.makeBooleanProp(false),
|
||||
/**
|
||||
* 原生属性，设置最大长度。-1 表示无限制
|
||||
* 类型: string / number
|
||||
* 默认值: -1
|
||||
*/
|
||||
maxlength: uni_modules_wotDesignUni_components_common_props.makeNumberProp(-1),
|
||||
/**
|
||||
* placeholder 居左边
|
||||
* 类型: boolean
|
||||
* 默认值: false
|
||||
*/
|
||||
placeholderLeft: uni_modules_wotDesignUni_components_common_props.makeBooleanProp(false),
|
||||
/**
|
||||
* 是否自动聚焦
|
||||
* 类型: boolean
|
||||
* 默认值: false
|
||||
* 最低版本: 0.1.63
|
||||
*/
|
||||
focus: uni_modules_wotDesignUni_components_common_props.makeBooleanProp(false),
|
||||
/**
|
||||
* 是否在点击清除按钮时聚焦输入框
|
||||
* 类型: boolean
|
||||
* 默认值: false
|
||||
* 最低版本: 0.1.63
|
||||
*/
|
||||
focusWhenClear: uni_modules_wotDesignUni_components_common_props.makeBooleanProp(false),
|
||||
/**
|
||||
* 原生属性，指定 placeholder 的样式，目前仅支持color,font-size和font-weight
|
||||
*/
|
||||
placeholderStyle: String,
|
||||
/**
|
||||
* 原生属性，指定 placeholder 的样式类
|
||||
*/
|
||||
placeholderClass: uni_modules_wotDesignUni_components_common_props.makeStringProp("")
|
||||
};
|
||||
exports.searchProps = searchProps;
|
||||
//# sourceMappingURL=../../../../../.sourcemap/mp-weixin/uni_modules/wot-design-uni/components/wd-search/types.js.map
|
||||
189
unpackage/dist/dev/mp-weixin/uni_modules/wot-design-uni/components/wd-search/wd-search.js
vendored
Normal file
189
unpackage/dist/dev/mp-weixin/uni_modules/wot-design-uni/components/wd-search/wd-search.js
vendored
Normal file
@@ -0,0 +1,189 @@
|
||||
"use strict";
|
||||
const common_vendor = require("../../../../common/vendor.js");
|
||||
const uni_modules_wotDesignUni_components_common_util = require("../common/util.js");
|
||||
const uni_modules_wotDesignUni_components_composables_useTranslate = require("../composables/useTranslate.js");
|
||||
const uni_modules_wotDesignUni_components_wdSearch_types = require("./types.js");
|
||||
if (!Math) {
|
||||
wdIcon();
|
||||
}
|
||||
const wdIcon = () => "../wd-icon/wd-icon.js";
|
||||
const __default__ = {
|
||||
name: "wd-search",
|
||||
options: {
|
||||
virtualHost: true,
|
||||
addGlobalClass: true,
|
||||
styleIsolation: "shared"
|
||||
}
|
||||
};
|
||||
const _sfc_main = /* @__PURE__ */ common_vendor.defineComponent({
|
||||
...__default__,
|
||||
props: uni_modules_wotDesignUni_components_wdSearch_types.searchProps,
|
||||
emits: ["update:modelValue", "change", "clear", "search", "focus", "blur", "cancel"],
|
||||
setup(__props, { emit: __emit }) {
|
||||
const props = __props;
|
||||
const emit = __emit;
|
||||
const { translate } = uni_modules_wotDesignUni_components_composables_useTranslate.useTranslate("search");
|
||||
const isFocused = common_vendor.ref(false);
|
||||
const showInput = common_vendor.ref(false);
|
||||
const inputValue = common_vendor.ref("");
|
||||
const showPlaceHolder = common_vendor.ref(true);
|
||||
const clearing = common_vendor.ref(false);
|
||||
common_vendor.watch(
|
||||
() => props.modelValue,
|
||||
(newValue) => {
|
||||
inputValue.value = newValue;
|
||||
if (newValue) {
|
||||
showInput.value = true;
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
common_vendor.watch(
|
||||
() => props.focus,
|
||||
(newValue) => {
|
||||
if (newValue) {
|
||||
if (props.disabled)
|
||||
return;
|
||||
closeCover();
|
||||
}
|
||||
}
|
||||
);
|
||||
common_vendor.onMounted(() => {
|
||||
if (props.focus) {
|
||||
closeCover();
|
||||
}
|
||||
});
|
||||
const rootClass = common_vendor.computed(() => {
|
||||
return `wd-search ${props.light ? "is-light" : ""} ${props.hideCancel ? "is-without-cancel" : ""} ${props.customClass}`;
|
||||
});
|
||||
const coverStyle = common_vendor.computed(() => {
|
||||
const coverStyle2 = {
|
||||
display: inputValue.value === "" && showPlaceHolder.value ? "flex" : "none"
|
||||
};
|
||||
return uni_modules_wotDesignUni_components_common_util.objToStyle(coverStyle2);
|
||||
});
|
||||
async function hackFocus(focus) {
|
||||
showInput.value = focus;
|
||||
await uni_modules_wotDesignUni_components_common_util.pause();
|
||||
isFocused.value = focus;
|
||||
}
|
||||
async function closeCover() {
|
||||
if (props.disabled)
|
||||
return;
|
||||
await uni_modules_wotDesignUni_components_common_util.pause(100);
|
||||
showPlaceHolder.value = false;
|
||||
hackFocus(true);
|
||||
}
|
||||
function handleInput(event) {
|
||||
inputValue.value = event.detail.value;
|
||||
emit("update:modelValue", event.detail.value);
|
||||
emit("change", {
|
||||
value: event.detail.value
|
||||
});
|
||||
}
|
||||
async function handleClear() {
|
||||
inputValue.value = "";
|
||||
if (props.focusWhenClear) {
|
||||
clearing.value = true;
|
||||
isFocused.value = false;
|
||||
}
|
||||
await uni_modules_wotDesignUni_components_common_util.pause();
|
||||
if (props.focusWhenClear) {
|
||||
showPlaceHolder.value = false;
|
||||
hackFocus(true);
|
||||
} else {
|
||||
showPlaceHolder.value = true;
|
||||
hackFocus(false);
|
||||
}
|
||||
emit("change", {
|
||||
value: ""
|
||||
});
|
||||
emit("update:modelValue", "");
|
||||
emit("clear");
|
||||
}
|
||||
function handleConfirm({ detail: { value } }) {
|
||||
emit("search", {
|
||||
value
|
||||
});
|
||||
}
|
||||
function handleFocus() {
|
||||
showPlaceHolder.value = false;
|
||||
emit("focus", {
|
||||
value: inputValue.value
|
||||
});
|
||||
}
|
||||
async function handleBlur() {
|
||||
await uni_modules_wotDesignUni_components_common_util.pause(150);
|
||||
if (clearing.value) {
|
||||
clearing.value = false;
|
||||
return;
|
||||
}
|
||||
showPlaceHolder.value = !inputValue.value;
|
||||
showInput.value = !showPlaceHolder.value;
|
||||
isFocused.value = false;
|
||||
emit("blur", {
|
||||
value: inputValue.value
|
||||
});
|
||||
}
|
||||
function handleCancel() {
|
||||
emit("cancel", {
|
||||
value: inputValue.value
|
||||
});
|
||||
}
|
||||
return (_ctx, _cache) => {
|
||||
return common_vendor.e({
|
||||
a: !_ctx.placeholderLeft
|
||||
}, !_ctx.placeholderLeft ? {
|
||||
b: common_vendor.p({
|
||||
name: "search",
|
||||
["custom-class"]: "wd-search__search-icon"
|
||||
}),
|
||||
c: common_vendor.t(_ctx.placeholder || common_vendor.unref(translate)("search")),
|
||||
d: common_vendor.n(`wd-search__placeholder-txt ${_ctx.placeholderClass}`),
|
||||
e: common_vendor.s(coverStyle.value),
|
||||
f: common_vendor.o(closeCover)
|
||||
} : {}, {
|
||||
g: showInput.value || inputValue.value || _ctx.placeholderLeft
|
||||
}, showInput.value || inputValue.value || _ctx.placeholderLeft ? {
|
||||
h: common_vendor.p({
|
||||
name: "search",
|
||||
["custom-class"]: "wd-search__search-left-icon"
|
||||
})
|
||||
} : {}, {
|
||||
i: showInput.value || inputValue.value || _ctx.placeholderLeft
|
||||
}, showInput.value || inputValue.value || _ctx.placeholderLeft ? {
|
||||
j: _ctx.placeholder || common_vendor.unref(translate)("search"),
|
||||
k: `wd-search__placeholder-txt ${_ctx.placeholderClass}`,
|
||||
l: _ctx.placeholderStyle,
|
||||
m: common_vendor.n(_ctx.customInputClass),
|
||||
n: common_vendor.o(handleFocus),
|
||||
o: common_vendor.o([($event) => inputValue.value = $event.detail.value, handleInput]),
|
||||
p: common_vendor.o(handleBlur),
|
||||
q: common_vendor.o(handleConfirm),
|
||||
r: _ctx.disabled,
|
||||
s: _ctx.maxlength,
|
||||
t: isFocused.value,
|
||||
v: inputValue.value
|
||||
} : {}, {
|
||||
w: inputValue.value
|
||||
}, inputValue.value ? {
|
||||
x: common_vendor.o(handleClear),
|
||||
y: common_vendor.p({
|
||||
["custom-class"]: "wd-search__clear wd-search__clear-icon",
|
||||
name: "error-fill"
|
||||
})
|
||||
} : {}, {
|
||||
z: !_ctx.hideCancel
|
||||
}, !_ctx.hideCancel ? {
|
||||
A: common_vendor.t(_ctx.cancelTxt || common_vendor.unref(translate)("cancel")),
|
||||
B: common_vendor.o(handleCancel)
|
||||
} : {}, {
|
||||
C: common_vendor.n(rootClass.value),
|
||||
D: common_vendor.s(_ctx.customStyle)
|
||||
});
|
||||
};
|
||||
}
|
||||
});
|
||||
const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["__scopeId", "data-v-cc0202be"]]);
|
||||
wx.createComponent(Component);
|
||||
//# sourceMappingURL=../../../../../.sourcemap/mp-weixin/uni_modules/wot-design-uni/components/wd-search/wd-search.js.map
|
||||
6
unpackage/dist/dev/mp-weixin/uni_modules/wot-design-uni/components/wd-search/wd-search.json
vendored
Normal file
6
unpackage/dist/dev/mp-weixin/uni_modules/wot-design-uni/components/wd-search/wd-search.json
vendored
Normal file
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"wd-icon": "../wd-icon/wd-icon"
|
||||
}
|
||||
}
|
||||
1
unpackage/dist/dev/mp-weixin/uni_modules/wot-design-uni/components/wd-search/wd-search.wxml
vendored
Normal file
1
unpackage/dist/dev/mp-weixin/uni_modules/wot-design-uni/components/wd-search/wd-search.wxml
vendored
Normal file
@@ -0,0 +1 @@
|
||||
<view class="{{['data-v-cc0202be', C]}}" style="{{D}}"><view class="wd-search__block data-v-cc0202be"><slot name="prefix"></slot><view class="wd-search__field data-v-cc0202be"><view wx:if="{{a}}" style="{{e}}" class="wd-search__cover data-v-cc0202be" bindtap="{{f}}"><wd-icon wx:if="{{b}}" class="data-v-cc0202be" u-i="cc0202be-0" bind:__l="__l" u-p="{{b}}"></wd-icon><text class="{{['data-v-cc0202be', d]}}">{{c}}</text></view><wd-icon wx:if="{{g}}" class="data-v-cc0202be" u-i="cc0202be-1" bind:__l="__l" u-p="{{h}}"></wd-icon><input wx:if="{{i}}" placeholder="{{j}}" placeholder-class="{{k}}" placeholder-style="{{l}}" confirm-type="search" class="{{['data-v-cc0202be', 'wd-search__input', m]}}" bindfocus="{{n}}" bindinput="{{o}}" bindblur="{{p}}" bindconfirm="{{q}}" disabled="{{r}}" maxlength="{{s}}" focus="{{t}}" value="{{v}}"/><wd-icon wx:if="{{w}}" class="data-v-cc0202be" bindclick="{{x}}" u-i="cc0202be-2" bind:__l="__l" u-p="{{y}}"/></view></view><block wx:if="{{z}}"><block wx:if="{{$slots.suffix}}"><slot name="suffix"></slot></block><block wx:else><view class="wd-search__cancel data-v-cc0202be" bindtap="{{B}}">{{A}}</view></block></block></view>
|
||||
298
unpackage/dist/dev/mp-weixin/uni_modules/wot-design-uni/components/wd-search/wd-search.wxss
vendored
Normal file
298
unpackage/dist/dev/mp-weixin/uni_modules/wot-design-uni/components/wd-search/wd-search.wxss
vendored
Normal file
@@ -0,0 +1,298 @@
|
||||
/* 水平间距 */
|
||||
/* 水平间距 */
|
||||
/**
|
||||
* 混合宏
|
||||
*/
|
||||
/**
|
||||
* SCSS 配置项：命名空间以及BEM
|
||||
*/
|
||||
/**
|
||||
* 辅助函数
|
||||
*/
|
||||
/**
|
||||
* SCSS 配置项：命名空间以及BEM
|
||||
*/
|
||||
/* 转换成字符串 */
|
||||
/* 判断是否存在 Modifier */
|
||||
/* 判断是否存在伪类 */
|
||||
/**
|
||||
* 主题色切换
|
||||
* @params $theme-color 主题色
|
||||
* @params $type 变暗’dark‘ 变亮 'light'
|
||||
* @params $mix-color 自己设置的混色
|
||||
*/
|
||||
/**
|
||||
* 颜色结果切换， 如果开启线性渐变色 使用渐变色，如果没有开启，那么使用主题色
|
||||
* @params $open-linear 是否开启线性渐变色
|
||||
* @params $deg 渐变色角度
|
||||
* @params $theme-color 当前配色
|
||||
* @params [Array] $set 主题色明暗设置，与 $color-list 数量对应
|
||||
* @params [Array] $color-list 渐变色顺序， $color-list 和 $per-list 数量相同
|
||||
* @params [Array] $per-list 渐变色比例
|
||||
*/
|
||||
/**
|
||||
* BEM，定义块（b)
|
||||
*/
|
||||
/* 定义元素（e），对于伪类，会自动将 e 嵌套在 伪类 底下 */
|
||||
/* 此方法用于生成穿透样式 */
|
||||
/* 定义元素（e），对于伪类，会自动将 e 嵌套在 伪类 底下 */
|
||||
/* 定义状态（m） */
|
||||
/* 定义状态（m） */
|
||||
/* 对于需要需要嵌套在 m 底下的 e，调用这个混合宏，一般在切换整个组件的状态，如切换颜色的时候 */
|
||||
/* 状态，生成 is-$state 类名 */
|
||||
/**
|
||||
* 常用混合宏
|
||||
*/
|
||||
/* 单行超出隐藏 */
|
||||
/* 多行超出隐藏 */
|
||||
/* 清除浮动 */
|
||||
/* 0.5px 边框 指定方向*/
|
||||
/* 0.5px 边框 环绕 */
|
||||
/**
|
||||
* 三角形实现尖角样式，适用于背景透明情况
|
||||
* @param $size 三角形高，底边为 $size * 2
|
||||
* @param $bg 三角形背景颜色
|
||||
*/
|
||||
/**
|
||||
* 正方形实现尖角样式，适用于背景不透明情况
|
||||
* @param $size 正方形边长
|
||||
* @param $bg 正方形背景颜色
|
||||
* @param $z-index z-index属性值，不得大于外部包裹器
|
||||
* @param $box-shadow 阴影
|
||||
*/
|
||||
/**
|
||||
* 辅助函数
|
||||
*/
|
||||
/**
|
||||
* SCSS 配置项：命名空间以及BEM
|
||||
*/
|
||||
/* 转换成字符串 */
|
||||
/* 判断是否存在 Modifier */
|
||||
/* 判断是否存在伪类 */
|
||||
/**
|
||||
* 主题色切换
|
||||
* @params $theme-color 主题色
|
||||
* @params $type 变暗’dark‘ 变亮 'light'
|
||||
* @params $mix-color 自己设置的混色
|
||||
*/
|
||||
/**
|
||||
* 颜色结果切换， 如果开启线性渐变色 使用渐变色，如果没有开启，那么使用主题色
|
||||
* @params $open-linear 是否开启线性渐变色
|
||||
* @params $deg 渐变色角度
|
||||
* @params $theme-color 当前配色
|
||||
* @params [Array] $set 主题色明暗设置，与 $color-list 数量对应
|
||||
* @params [Array] $color-list 渐变色顺序， $color-list 和 $per-list 数量相同
|
||||
* @params [Array] $per-list 渐变色比例
|
||||
*/
|
||||
/**
|
||||
* UI规范基础变量
|
||||
*/
|
||||
/*----------------------------------------- Theme color. start ----------------------------------------*/
|
||||
/* 主题颜色 */
|
||||
/* 辅助色 */
|
||||
/* 文字颜色（默认浅色背景下 */
|
||||
/* 暗黑模式 */
|
||||
/* 图形颜色 */
|
||||
/*----------------------------------------- Theme color. end -------------------------------------------*/
|
||||
/*-------------------------------- Theme color application size. start --------------------------------*/
|
||||
/* 文字字号 */
|
||||
/* 文字字重 */
|
||||
/* 尺寸 */
|
||||
/*-------------------------------- Theme color application size. end --------------------------------*/
|
||||
/* component var */
|
||||
/* action-sheet */
|
||||
/* badge */
|
||||
/* button */
|
||||
/* cell */
|
||||
/* calendar */
|
||||
/* checkbox */
|
||||
/* collapse */
|
||||
/* divider */
|
||||
/* drop-menu */
|
||||
/* input-number */
|
||||
/* input */
|
||||
/* textarea */
|
||||
/* loadmore */
|
||||
/* message-box */
|
||||
/* notice-bar */
|
||||
/* pagination */
|
||||
/* picker */
|
||||
/* col-picker */
|
||||
/* overlay */
|
||||
/* popup */
|
||||
/* progress */
|
||||
/* radio */
|
||||
/* search */
|
||||
/* slider */
|
||||
/* sort-button */
|
||||
/* steps */
|
||||
/* switch */
|
||||
/* tabs */
|
||||
/* tag */
|
||||
/* toast */
|
||||
/* loading */
|
||||
/* tooltip */
|
||||
/* popover */
|
||||
/* grid-item */
|
||||
/* statustip */
|
||||
/* card */
|
||||
/* upload */
|
||||
/* curtain */
|
||||
/* notify */
|
||||
/* skeleton */
|
||||
/* circle */
|
||||
/* swiper */
|
||||
/* swiper-nav */
|
||||
/* segmented */
|
||||
/* tabbar */
|
||||
/* tabbar-item */
|
||||
/* navbar */
|
||||
/* navbar-capsule */
|
||||
/* table */
|
||||
/* sidebar */
|
||||
/* sidebar-item */
|
||||
/* fab */
|
||||
/* count-down */
|
||||
/* keyboard */
|
||||
/* number-keyboard */
|
||||
/* passwod-input */
|
||||
/* form-item */
|
||||
/* backtop */
|
||||
/* index-bar */
|
||||
/* text */
|
||||
/* video-preview */
|
||||
/* img-cropper */
|
||||
/* floating-panel */
|
||||
/* signature */
|
||||
.wot-theme-dark .wd-search.data-v-cc0202be {
|
||||
background: var(--wot-dark-background4, #323233);
|
||||
}
|
||||
.wot-theme-dark .wd-search__block.data-v-cc0202be {
|
||||
background-color: var(--wot-dark-background, #131313);
|
||||
}
|
||||
.wot-theme-dark .wd-search__input.data-v-cc0202be {
|
||||
color: var(--wot-dark-color, var(--wot-color-white, white));
|
||||
}
|
||||
.wot-theme-dark .wd-search__cover.data-v-cc0202be {
|
||||
background-color: var(--wot-dark-background, #131313);
|
||||
}
|
||||
.wot-theme-dark .wd-search__search-icon.data-v-cc0202be {
|
||||
color: var(--wot-dark-color, var(--wot-color-white, white));
|
||||
}
|
||||
.wot-theme-dark .wd-search__search-left-icon.data-v-cc0202be {
|
||||
color: var(--wot-dark-color, var(--wot-color-white, white));
|
||||
}
|
||||
.wot-theme-dark .wd-search__clear.data-v-cc0202be {
|
||||
color: var(--wot-dark-color, var(--wot-color-white, white));
|
||||
}
|
||||
.wot-theme-dark .wd-search__cancel.data-v-cc0202be {
|
||||
color: var(--wot-dark-color, var(--wot-color-white, white));
|
||||
}
|
||||
.wot-theme-dark .wd-search.is-light.data-v-cc0202be {
|
||||
background: var(--wot-dark-background4, #323233);
|
||||
}
|
||||
.wot-theme-dark .wd-search.is-light .wd-search__block.data-v-cc0202be {
|
||||
background: var(--wot-dark-background7, #707070);
|
||||
}
|
||||
.wot-theme-dark .wd-search.is-light .wd-search__cover.data-v-cc0202be {
|
||||
background: var(--wot-dark-background7, #707070);
|
||||
}
|
||||
.wd-search.data-v-cc0202be {
|
||||
display: flex;
|
||||
padding: var(--wot-search-padding, 10px 0 10px var(--wot-search-side-padding, var(--wot-size-side-padding, 15px)));
|
||||
align-items: center;
|
||||
background: #fff;
|
||||
}
|
||||
.wd-search__block.data-v-cc0202be {
|
||||
flex: 1;
|
||||
background-color: var(--wot-search-input-bg, var(--wot-color-bg, #f5f5f5));
|
||||
border-radius: var(--wot-search-input-radius, 15px);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
.wd-search__field.data-v-cc0202be {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
.wd-search__input.data-v-cc0202be {
|
||||
flex: 1;
|
||||
height: var(--wot-search-input-height, 30px);
|
||||
box-sizing: border-box;
|
||||
padding: var(--wot-search-input-padding, 0 32px 0 42px);
|
||||
border: none;
|
||||
background: transparent;
|
||||
font-size: var(--wot-search-input-fs, var(--wot-fs-content, 14px));
|
||||
-webkit-appearance: none;
|
||||
outline: none;
|
||||
color: var(--wot-search-input-color, #262626);
|
||||
z-index: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.wd-search__input.data-v-cc0202be::-webkit-search-cancel-button {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
.wd-search__cover.data-v-cc0202be {
|
||||
width: 100%;
|
||||
height: var(--wot-search-input-height, 30px);
|
||||
background-color: var(--wot-search-input-bg, var(--wot-color-bg, #f5f5f5));
|
||||
line-height: var(--wot-search-input-height, 30px);
|
||||
font-size: var(--wot-search-input-fs, var(--wot-fs-content, 14px));
|
||||
border-radius: var(--wot-search-input-radius, 15px);
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.data-v-cc0202be .wd-search__search-icon {
|
||||
margin-right: 8px;
|
||||
color: var(--wot-search-icon-color, var(--wot-color-icon, #d9d9d9));
|
||||
font-size: var(--wot-search-icon-size, 18px);
|
||||
}
|
||||
.data-v-cc0202be .wd-search__search-left-icon {
|
||||
position: absolute;
|
||||
font-size: var(--wot-search-icon-size, 18px);
|
||||
top: 50%;
|
||||
left: 16px;
|
||||
transform: translateY(-50%);
|
||||
color: var(--wot-search-icon-color, var(--wot-color-icon, #d9d9d9));
|
||||
}
|
||||
.wd-search__placeholder-txt.data-v-cc0202be {
|
||||
color: var(--wot-search-placeholder-color, #bfbfbf);
|
||||
font-size: var(--wot-search-input-fs, var(--wot-fs-content, 14px));
|
||||
}
|
||||
.data-v-cc0202be .wd-search__clear {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
padding: 6px 9px 6px 7px;
|
||||
color: var(--wot-search-cancel-color, rgba(0, 0, 0, 0.65));
|
||||
}
|
||||
.data-v-cc0202be .wd-search__clear-icon {
|
||||
vertical-align: middle;
|
||||
font-size: var(--wot-search-clear-icon-size, var(--wot-fs-title, 16px));
|
||||
}
|
||||
.wd-search__cancel.data-v-cc0202be {
|
||||
padding: var(--wot-search-cancel-padding, 0 var(--wot-search-side-padding, var(--wot-size-side-padding, 15px)) 0 10px);
|
||||
height: var(--wot-search-input-height, 30px);
|
||||
line-height: var(--wot-search-input-height, 30px);
|
||||
font-size: var(--wot-search-cancel-fs, var(--wot-fs-title, 16px));
|
||||
color: var(--wot-search-cancel-color, rgba(0, 0, 0, 0.65));
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
.wd-search.is-light.data-v-cc0202be {
|
||||
background: var(--wot-search-light-bg, var(--wot-color-bg, #f5f5f5));
|
||||
}
|
||||
.wd-search.is-light .wd-search__block.data-v-cc0202be {
|
||||
background: #fff;
|
||||
}
|
||||
.wd-search.is-light .wd-search__cover.data-v-cc0202be {
|
||||
background: #fff;
|
||||
}
|
||||
.wd-search.is-without-cancel.data-v-cc0202be {
|
||||
padding-right: var(--wot-search-side-padding, var(--wot-size-side-padding, 15px));
|
||||
}
|
||||
Reference in New Issue
Block a user