仿互站小程序

vant/search/index.js

@@ -0,0 +1,56 @@
+(0, require("../common/component").VantComponent)({
+    field: !0,
+    classes: [ "field-class", "input-class", "cancel-class" ],
+    props: {
+        focus: Boolean,
+        error: Boolean,
+        disabled: Boolean,
+        readonly: Boolean,
+        inputAlign: String,
+        showAction: Boolean,
+        useActionSlot: Boolean,
+        placeholder: String,
+        placeholderStyle: String,
+        background: {
+            type: String,
+            value: "#ffffff"
+        },
+        maxlength: {
+            type: Number,
+            value: -1
+        },
+        shape: {
+            type: String,
+            value: "square"
+        },
+        icon: {
+            type: String,
+            value: "search"
+        },
+        label: String
+    },
+    methods: {
+        onChange: function(e) {
+            this.set({
+                value: e.detail.value
+            }), this.$emit("change", e.detail.value);
+        },
+        onCancel: function() {
+            this.set({
+                value: ""
+            }), this.$emit("cancel"), this.$emit("change", "");
+        },
+        onSearch: function() {
+            this.$emit("search", this.data.value);
+        },
+        onFocus: function() {
+            this.$emit("focus");
+        },
+        onBlur: function() {
+            this.$emit("blur");
+        },
+        onClear: function() {
+            this.$emit("clear");
+        }
+    }
+});

vant/search/index.json

@@ -0,0 +1,14 @@
+{
+    "component": true,
+    "usingComponents": {
+        "van-icon": "../icon/index",
+        "van-field": "../field/index",
+        "forview": "/utils/forview/index",
+        "van-loading": "/vant/loading/index",
+        "van-dialog": "/vant/dialog/index",
+        "van-button": "/vant/button/index",
+        "van-popup": "/vant/popup/index",
+        "van-tab": "/vant/tab/index",
+        "van-tabs": "/vant/tabs/index"
+    }
+}

vant/search/index.wxml

@@ -0,0 +1,12 @@
+<view class="{{utils.bem( 'search',{withaction:showAction||useActionSlot} )}} custom-class" style="background: {{background}}">
+    <view class="{{utils.bem( 'search__content',[shape] )}}">
+        <view class="van-search__label" wx:if="{{label}}">{{label}}</view>
+        <slot name="label" wx:else></slot>
+        <van-field clearable bind:blur="onBlur" bind:change="onChange" bind:clear="onClear" bind:confirm="onSearch" bind:focus="onFocus" border="{{false}}" class="van-search__field field-class" confirmType="search" customStyle="padding: 5px 10px 5px 0; background-color: transparent;" disabled="{{disabled}}" error="{{error}}" focus="{{focus}}" inputAlign="{{inputAlign}}" inputClass="input-class" leftIcon="{{icon}}" maxlength="{{maxlength}}" placeholder="{{placeholder}}" placeholderStyle="{{placeholderStyle}}" readonly="{{readonly}}" type="search" value="{{value}}"></van-field>
+    </view>
+    <view class="van-search__action" hoverClass="van-search__action--hover" hoverStayTime="70" wx:if="{{showAction||useActionSlot}}">
+        <slot name="action" wx:if="{{useActionSlot}}"></slot>
+        <view bind:tap="onCancel" class="cancel-class" wx:else>取消</view>
+    </view>
+</view>
+<wxs module="utils" src="../wxs/utils.wxs" />

vant/search/index.wxss

@@ -0,0 +1,52 @@
+@import "../area/index.wxss";
+
+.van-search {
+    padding: 10px 16px;
+    align-items: center;
+    box-sizing: border-box;
+}
+
+.van-search,.van-search__content {
+    display: flex;
+}
+
+.van-search__content {
+    padding-left: 10px;
+    background-color: #f7f8fa;
+    border-radius: 2px;
+    flex: 1;
+}
+
+.van-search__content--round {
+    border-radius: 17px;
+}
+
+.van-search__label {
+    padding: 0 5px;
+    font-size: 14px;
+    line-height: 34px;
+    color: #333;
+}
+
+.van-search__field {
+    flex: 1;
+}
+
+.van-search__field__left-icon {
+    color: #999;
+}
+
+.van-search--withaction {
+    padding-right: 0;
+}
+
+.van-search__action {
+    padding: 0 10px;
+    font-size: 14px;
+    line-height: 34px;
+    color: #333;
+}
+
+.van-search__action--hover {
+    background-color: #f2f3f5;
+}