체크박스에 vue-fontawesome을 사용할 수 있습니까?

체크박스에 vue-fontawesome을 사용할 수 있습니까?

vue-fontawesome과 폰트-awesome-icon을 함께 사용하고 있습니다.이는 다음과 같은 "스탠드 아론" 아이콘에 매우 적합합니다.

<font-awesome-icon :icon="icon" size="1x" /> .

하지만 어떻게 하면 이 폰타썸 체크마크를 사용할 수 있을까요?<input type="checkbox">vue 컴포넌트 방식으로요?

css 의사 요소를 검색하는 방법은 다음과 같습니다.

FontAwesomeConfig = { searchPseudoElements: true };

이 방법은 기존 마크업을 검사하고 CSS 스타일링을 통해 속도가 느린 의사 요소를 인라인 SVG에 추가하기 때문에 권장되지 않습니다.

이 방법은 권장하지 않으므로 어떻게 작동하는지 설명하지 않습니다. 관심 있는 경우 여기에서 자세히 읽어 보십시오.

---

유사 요소를 사용하는 대신 이러한 확인란을 위한 구성 요소를 만드십시오.

다음 단일 파일 컴포넌트를 만듭니다.awesome-checkbox.

[ Awesome Check ]체크박스표시하다

<template>
  <div :class="{'awesome-checkbox': true, [wrapperClassName]: !!wrapperClassName}"
       :style="{ color: isChecked ? checkedColor : uncheckedColor }">
    <input :id="id"
           :name="name"
           type="checkbox"
           class="awesome-checkbox__input"
           v-model="checkboxModel">
    <label :for="id"
           :style="{ cursor }"
           class="awesome-checkbox__label"
           @click="toggleCheck">
      <font-awesome-icon :icon="isChecked ? checkedIcon : uncheckedIcon"
                         :size="size" />
    </label>
  </div>
</template>

<script>
import FontAwesomeIcon from '@fortawesome/vue-fontawesome';
import { faSquare, faCheckSquare } from '@fortawesome/fontawesome-free-solid';

/**
 * Custom HTML <input> checkbox element using Font-Awesome-Icon 5 icons for visual effect.
 */
export default {
  name: 'awesome-checkbox',

  components: { FontAwesomeIcon },

  props: {
    /**
     * A wrapper class other than default that provides extra manipulation from parent component.
     */
    wrapperClassName: {
      type: String,
      default: null,
    },
    /**
     * The name attribute for the checkbox input.
     */
    name: {
      type: String,
      default: null,
    },
    /**
     * The id attribute for the checkbox input.
     */
    id: {
      type: String,
      default: null,
      required: true,
    },
    /**
     * The model directive value to create two-way data binding.
     */
    model: {
      type: Boolean,
      default: null,
      required: true,
    },
    /**
     * The mouse cursor to display when the mouse pointer is over the Font-Awesome-Icon 5 element.
     * Accepts any cursor CSS property value.
     */
    cursor: {
      type: String,
      default: 'pointer',
    },
    /**
     * The Font-Awesome-Icon 5 imported icon object used for the unchecked state.
     */
    uncheckedIcon: {
      type: Object,
      default: () => faSquare,
    },
    /**
     * The Font-Awesome-Icon 5 imported icon object used for the checked state.
     */
    checkedIcon: {
      type: Object,
      default: () => faCheckSquare,
    },
    /**
     * The Font-Awesome-Icon 5 icon size.
     */
    size: {
      type: String,
      default: '1x',
    },
    /**
     * The Font-Awesome-Icon 5 icon color used for the unchecked state.
     */
    uncheckedColor: {
      type: String,
      default: 'inherit',
    },
    /**
     * The Font-Awesome-Icon 5 icon color used for the checked state.
     */
    checkedColor: {
      type: String,
      default: 'inherit',
    },
  },

  data() {
    return {
      isChecked: !!this.model,
      checkboxModel: this.model,
    };
  },

  methods: {
    emitModelValueUpdate() {
      /**
       * Update event.
       *
       * @event update
       * @type {boolean}
       */
      this.$emit('update:model', this.isChecked);
    },
    /**
     * Gets called when the user clicks on the label element.
     */
    toggleCheck() {
      this.isChecked = !this.isChecked;
      this.emitModelValueUpdate();
    },
  },
};
</script>

<style lang="scss" scoped>
.awesome-checkbox {
  display: inline-flex;

  &__label {
    font-size: 1em; // Change Font-Awesome-Icon 5 icon size with css instead of predefined Font-Awesome-Icon 5 size prop.
  }

  &__input {
    display: none; // Hide the HTML <input> element.
  }
}
</style>

다음과 같이 부모 컴포넌트에서 사용합니다.

<template>
  <div>
    <awesome-checkbox :model.sync="acceptTerms"
                      checkedColor="#41B883"
                      uncheckedColor="#E0EAF1"
                      cursor="pointer"
                      size="1x"
                      id="my-awesome-checkbox"
                      name="acceptTerms"
                      :checkedIcon="faCheckSquare"
                      :uncheckedIcon="faSquare" />
  </div>
</template>

<script>
import { faSquare, faCheckSquare } from '@fortawesome/fontawesome-free-solid';
import AwesomeCheckbox from '@/components/path/to/AwesomeCheckbox';

export default {
  name: 'parent-component',

  components: { AwesomeCheckbox },

  data() {
    return {
      acceptTerms: false,
      faSquare,
      faCheckSquare,
    };
  },
};
</script>

<style lang="scss" scoped>
/* ... */
</style>

---

이 컴포넌트를 필요에 따라 확장할 수 있습니다.예를 들어,modelprop는 부울이 아닌 어레이와 같은 여러 유형을 허용합니다.

질문하신 대로 이 부품을 만들었을 뿐 아직 충분히 테스트하지 않았으니 주의해서 사용해 주세요.

나처럼, 리키의 모든 노력을 동원해서 보는 사람들을 위해 활자본을 쓰죠.

체크 박스

<template>
  <div :class="{'awesome-checkbox': true, [wrapperClassName]: !!wrapperClassName}"
       :style="{ color: checked ? checkedColor : uncheckedColor }">
    <input :id="id"
           :name="name"
           type="checkbox"
           class="awesome-checkbox__input"
           v-model="checked">
    <label :for="id"
           :style="{ cursor }"
           class="awesome-checkbox__label"
           @click="toggleCheck">
      <font-awesome-icon :icon="checked ? checkedIcon : uncheckedIcon"
                         :size="size" />
    </label>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import { faSquare, faCheckSquare } from '@fortawesome/fontawesome-free-solid';

@Component

export default class Checkbox extends Vue {
  @Prop({default: null})
  wrapperClassName!: string;

  @Prop({default: null})
  name!: string;

  @Prop({default: null, required: true})
  id!: string;

  @Prop({default: null, required: true})
  model!: Boolean;

  @Prop({default: 'pointer'})
  cursor!: string;

  @Prop({default: () => faSquare})
  uncheckedIcon!: Object;

  @Prop({default: () => faCheckSquare})
  checkedIcon!: Object;

  @Prop({default: '1x'})
  size!: string;

  @Prop({default: 'inherit'})
  uncheckedColor!: string;

  @Prop({default: 'inherit'})
  ucheckedColor!: string;

  private emitModelValueUpdate() {
    /**
     * Update event.
     *
     * @event update
     * @type {boolean}
     */
    this.$emit('update:model', this.$data.checked);
  }
  private toggleCheck() {
    this.$data.checked = !this.$data.checked;
    this.emitModelValueUpdate();
  }

  constructor() {
    super();
  }

  public data() {
    return {
      checked: false,
    };
  }

}
</script>

<style lang="scss" scoped>
.awesome-checkbox {
  display: inline-flex;

  &__label {
    font-size: 1em; // Change Font-Awesome-Icon 5 icon size with css instead of predefined Font-Awesome-Icon 5 size prop.
  }

  &__input {
    display: none; // Hide the HTML <input> element.
  }
}
</style>

부모

<template>
  <div class="content">
    <b-row>      
      <b-col>
        <Checkbox />
      </b-col>
    </b-row>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import Checkbox from '@/components/forms/Checkbox.vue';

@Component({
  components: {
    Checkbox,
  },
})

export default class DevHelper extends Vue {
  @Prop() private msg!: string;
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">

</style>

도움이 됐으면 좋겠다.

일반적인 방법으로 이 작업을 수행할 수 있습니다.<input>css 사용display:none스타일링도 하고<label>css 및 pseudo를 사용하여::before학급.

이것은 Vue와 Fontawesome https://jsfiddle.net/skribe/9fxsn797/3/에서 작업 중인 Jfiddle입니다.

구성 요소에서...

<input id='ckb_1' type="checkbox" v-model="ckb_1" value="checked">
<label for='ckb_1'>Check Box</label>

css에서...

input[type=checkbox] + label::before {
   content: '\f0c8';
   font-family: FontAwesome;
   display: inline-block;
   padding-right: 5px;
} 

input[type=checkbox]:checked + label::before {
   content: '\f14a';
}

input {
  display:none;
 }

추가했습니다.v-modelVue-esque로 만들 수 있지만 vue 컴포넌트에 있는 방법 이외에는 특별히 "vue 컴포넌트 방식"이 없습니다.

언급URL : https://stackoverflow.com/questions/48768688/can-i-use-vue-fontawesome-for-checkbox-checkmark