naive-ui/demo/debug-pages/suffixDebug/basic.demo.vue

<template>
  <div class="n-doc-section">
    <div class="n-doc-section__header">
      DateTime Range
    </div>
    <div class="n-doc-section__view" style="flex-wrap: wrap">
      <!--EXAMPLE_START-->
      <n-base-suffix clearable :show="show" />
      <n-base-suffix :show="show" disabled arrow :active="active" />
      <n-base-suffix :show="show" :active="active" arrow clearable />
      <n-base-suffix :active="!active" :show="show" arrow />
      <!--EXAMPLE_END-->
    </div>
    <pre class="n-doc-section__inspect">
      <n-button @click="toggleActive">toggleActive</n-button><n-button @click="toggleShow">toggleShow</n-button>
    </pre>
    <pre>
      <!--SOURCE-->
    </pre>
  </div>
</template>

<script>
export default {
  data () {
    return {
      active: false,
      show: true
    }
  },
  methods: {
    toggleActive () {
      this.active = !this.active
    },
    toggleShow () {
      this.show = !this.show
    }
  }
}
</script>