Auth Pageの実装

17410 ワード
vue サイドアイテム FE テキストリンク
開発ログDay 2
Vue
slot
slotを使用して、汎用スタイルの構成部品を作成してみてはいかがでしょうか.
失敗h1、pの要素はslotを通ってParentComponentの内部に入ったようですが、ParentComponentの要素ではないので、scopedに設定したスタイルは適用されません.
ChildComponent
<template>
  <ParentComponet>
    <h1>Text</h1>
    <p>TextText</p>
  </ParentComponent>
</template>
ParentComponent
<template>
  <div>
    <slot></slot>
  </div>
</template>

<style scoped>
h1 {
  //...
}

p {
  // ...
}
</style>
select & v-model
vueでselectを使用するには、次の手順に従います.
1つの構成部品内でデータとレンダリングを同時に行う場合.
<div id="v-model-select" class="demo">
  // v-model을 통해 데이터와 연결
  <select v-model="selected">
    <option disabled value="">Please select one</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <span>Selected: {{ selected }}</span>
</div>
親構成部品と子構成部品の間
// 부모 컴포넌트
<template>
  <ChildComponent :cityList="cityList" @update:city="handleUpdateCity" />  
</template>
// 자식 컴포넌트
<template>
  <select @change="handleChange">
    <option v-for="city in cityList" :key="city" :value="city">
      {{ city }}
    </option>
  </select>
</template>
<script>
export default {
  props: {
    cityList: Array,
  },
  emit: ["update:city"],
  setup(_, { emit }) {
    const handleChange = (event) => {
      emit("update:city", event.target.value)
    }
  },
}      
</script>
Selectの矢印をカスタマイズしたい場合は?
<template>
  <div class="select-wrapper">
    <select @change="handleChange">
      <option disabled :value="field.placeholder"></option>
      <option v-for="item in field.options" :key="item" :value="item">
        {{ item }}
      </option>
    </select>
    <span class="material-icons icon">expand_more</span>
  </div>
</template>
TailwindCSSの使用
.select-wrapper {
  @apply relative;

  select {
    /* select의 화살표를 없애는 코드 */
    -moz-appearance: none; /* Firefox */
    -webkit-appearance: none; /* Safari and Chrome */
    appearance: none;
    @apply border border-gray-400 rounded py-2 px-4 w-full outline-none;

    &:focus {
      @apply ring-2 ring-blue-500;
    }

    &.error {
      @apply border-red-500 bg-red-50;
    }
  }

  .icon {
    transform: translateY(-50%);
    @apply absolute top-1/2 right-2;
  }
}
NPMパッケージの作成😉
ダミーのためのJWT(JSONウェブトークン)の基礎