短视频ID生成工具

<el-button @click="showVlog()">短视频ID生成</el-button>

<el-dialog :visible.sync="vlogVisible" class="dialog-auto" title="快手短视频ID生成工具">
 <el-form>
    <el-form-item label="所属应用Id">
      <el-input v-model="vlog.appId"/>
    </el-form-item>
    <el-form-item label="短视频ID">
      <el-input v-model="vlog.id"/>
    </el-form-item>
    <el-form-item label="SDK短视频ID" class="text-danger">
      <el-input v-model="vlogResultId" disabled>
        <template slot="append" v-if="vlogResultId">
          <el-button type="primary" @click="copyVlogId">复制</el-button>
        </template>
      </el-input>
    </el-form-item>
  </el-form>
</el-dialog>

data() {
    return {
      vlogVisible: false,
      vlog: {
        appId: null,
        id: null
      },
      vlogResultId: null
    }
  },
  watch:{
	vlog: {
      deep: true,
      handler() {
        const $appId = this.vlog.appId;
        const $id = this.vlog.id;
        if ($appId && $id) {
          const appId = parseInt($appId.trim())
          const id = parseInt($id.trim());
          this.vlogResultId = appId.toString(16) + 'fn' + id.toString(16);
        }
      }
    }
  },
  methods: {
	showVlog() {
      this.vlogVisible = true
    },
    copyVlogId(e) {
      this.$copyText(this.vlogResultId).then(() => {
        this.$message.success('复制成功');
      }).catch(() => {
        this.$message.success('不支持当前浏览器,复制失败');
      })
    }
  }
}