'use strict'
//導(dǎo)出變量
export const a = '100';  
 //導(dǎo)出方法
export const dogSay = function(){ 
    console.log('wang wang');
}
//導(dǎo)出函數(shù)
export function catSay(){
   console.log('miao miao'); 
}
// export catSay 這樣也行
// 使用的地方導(dǎo)入
// export導(dǎo)出的是多個(gè)，需要解構(gòu)取值
import {a,dogSay,catSay} from 'url'

<template>
  <div class="cat-input" :class="{ 'cat-input--suffix': showSuffix }">
    <!-- type：先判斷是否有傳入顯示密碼，控制輸入框類型是文本/密碼，然后是type傳入的值 -->
    <input
      :type="showPassword ? (passwordVisiable ? 'text' : 'password') : type"
      class="cat-input__inner"
      :placeholder="placeholder"
      :name="name"
      :disabled="disabled"
      :class="{ 'is-disabled': disabled }"
      :value="value"
      @input="handleinput"
    />
    <span class="cat-input__suffix" v-if="showSuffix">
      <i
        class="cat-input__icon cat-icon-circle-close"
        v-if="clearable && value"
        @click="clear"
      ></i>
      <i
        class="cat-input__icon cat-icon-view"
        :class="{ 'cat-icon-view-active': passwordVisiable }"
        v-if="showPassword"
        @click="handlepwd"
      ></i>
    </span>
  </div>
</template>
<script>
export default {
  name: "CatInput",
  props: {
    placeholder: {
      type: String,
      default: "",
    },
    type: {
      type: String,
      default: "text",
    },
    name: {
      type: String,
      default: "",
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    value: {
      type: String,
      default: "",
    },
    clearable: {
      type: Boolean,
      default: false,
    },
    showPassword: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      passwordVisiable: false, //控制是否顯示密碼
    };
  },
  methods: {
    handleinput(event) {
      //父組件在綁定v-model時(shí)，其實(shí)就綁定的input事件，因此父組件不需要再聲明事件了
      this.$emit("input", event.target.value);
    },
    clear() {
      this.$emit("input", "");
    },
    handlepwd() {
      this.passwordVisiable = !this.passwordVisiable;
    },
  },
  computed: {
    //有清空/顯示密碼，添加類名、顯示span
    showSuffix() {
      return this.clearable || this.showPassword;
    },
  },
};
</script>

// 組件需要注冊(cè)才能使用，要么全局，要么在頁面上局部注冊(cè)。
import CatInput from "./components/input.vue";
Vue.component(CatInput.name, CatInput);

<template>
  <!-- 
  輸入框需要綁定v-model，實(shí)際上是一個(gè)語法糖，等價(jià)于：
  :value="uname"
  @input="uname=$event.target.value"
 -->
  <div>
    <Cat-input
      placeholder="請(qǐng)輸入用戶名"
      type="text"
      v-model="uname"
      clearable
    ></Cat-input>
    <br />
    <Cat-input placeholder="禁用的輸入框" disabled></Cat-input>
    <br />
    <Cat-input
      placeholder="請(qǐng)輸入密碼"
      v-model="upwd"
      show-password
    ></Cat-input>
  </div>
</template>
<script>
export default {
  data() {
    return {
      uname: "",
      upwd: "",
    };
  },
};
</script>
<style lang="scss" scoped>
.cat-input {
  margin-bottom: 10px;
}
</style>