🧠 文章知识库

Appearance

Return to top
目录

姓名添加特殊字符组件(vant)

组件封装

index.wxml

html
<view class="special" catch:tap="addSpecial">·</view>

index.js

javascript
Component({
  methods: {
    addSpecial() {
      this.triggerEvent('addSpecial', '·')
    }
  }
})

index.json

json
{
  "component": true
}

indx.wxss

css
.special {
  width: 68rpx;
  height: 68rpx;
  line-height: 68rpx;
  background-color: #eee;
  color: #000;
  font-weight: bold;
  text-align: center;
  border-radius: 8rpx;
}

调用

index.wxml

html
<van-field 
  value="{{form.fullname}}" 
  hold-keyboard 
  input-align="right" 
  label="真实姓名" 
  placeholder="请输入真实姓名"
  maxlength="{{20}}"
  required
>
  <special-name slot="button" bind:addSpecial="addSpecial"></special-name>
</van-field>

index.js

javascript
  data: {
    form: {
      fullname: ''
    }
  }
  // 姓名添加特殊字符
  addSpecial(e) {
    this.setData({
      'form.fullname': this.data.form.fullname + '·'
    })
  },

index.json

json
{
  "navigationStyle": "custom",
  "usingComponents": {
    "special-name": "../../components/specialName/index",
  },
}