住所情報アシスタント

1. 使用シーン

この例では、アドレス情報アシスタントを適切に配置して、アドレス情報を迅速に解析する方法を紹介します。

2.機能を実現する

2.1ページの作成

2.2設定変数

2.3コンポーネントバインディングイベントの位置付け

export function onChange({ value }) {
  this.setState({
    location: value
  });
}

2.4単一行テキスト設定デフォルト値

省

_.get(state.location,'regionText.[0].zh_CN')

(2)市

_.get(state.location,'regionText.[1].zh_CN')

(3)区/県

_.get(state.location,'regionText.[2].zh_CN')

(4) 通り/町

_.get(state.location,'regionText.[3].zh_CN')

(5) 詳細住所

_.get(state.location,'region')

2.5単一行テキスト設定カスタムレンダリング

状況に応じてコード内の一意のidを変更します。

export function didMount() {
  this.$('textField_l6y8qjwn').set('renderView', this.renderView); // 省
  this.$('textField_l6y8qjwv').set('renderView', this.renderView); // 市
  this.$('textField_l6y8qjwt').set('renderView', this.renderView); // 区 / 县
  this.$('textField_l6y8qjwp').set('renderView', this.renderView); // 街道 / 镇
  this.$('textField_l6y8qjwr').set('renderView', this.renderView); // 详细地址

  // 初始化复制
  this.utils.loadScript("https://g.alicdn.com/code/lib/clipboard.js/2.0.11/clipboard.min.js")
    .then(() => {
      const clipboard = new ClipboardJS('.btn');
      clipboard.on('success', () => {
        this.utils.toast({
          title: `已复制到粘贴板`,
          type: 'success'
        });
      });
    })
}

export function renderView(value) {
  return (
    <span className="btn" data-clipboard-text={value}>
      {value}
      {value && <i className="next-icon next-icon-copy next-medium vc-icon" style={{ "float": "right", "fontSize": "10px", "padding": "4px", "verticalAlign": "top", "cursor": "pointer" }}></i>}
    </span>
  );
}

3.効果を実現する

4.オンラインで試してみます

示例中心 | 开发者赋能平台

AI智能体时代，全新宜搭。业务创新，一搭就行。

https://www.aliwork.com/o/coc?tplUuid=TPL_TFUJWIB6BG064PEVUCDK&from=yuque_subject