Question

我正在使用Vuetify v-select组件：https://vuetifyjs.com/en/components/selects/

我要用这样的图像进行选择：

但是我没有在文档中找到任何内容

Answer 1

您必须使用物品槽https://vuetifyjs.com/en/components/selects/#api

export class MediaPlayerScreen extends Component {
    static navigationOptions = {
        //header: null,
        headerTitle: '',
        headerTransparent: false,
        headerTintColor: 'white',
    }

    constructor(props) {
        super(props)
        this.AG = AG.instance
        this.filePath =
            this.AG.getFilePath() + props.navigation.state.params.file
        this.windowWidth = Dimensions.get('window').width
        this.windowHeight = Dimensions.get('window').height
    }
    //
    onPlaybackStatusUpdate = (playbackStatus) => {
        if (playbackStatus.didJustFinish) {
            this.props.navigation.goBack()
        }
    }
    //
    _handleVideoRef = async (component) => {
        const playbackObject = component
        if (playbackObject) {
            await playbackObject.loadAsync({
                uri: this.filePath,
                shouldPlay: false,
                posterSource: this.poster,
            })
            // todo: Trigger fullScreen without videoStack loading
            //playbackObject.presentFullscreenPlayer();
            playbackObject.playAsync()
            //playbackObject.setOnPlaybackStatusUpdate(this.onPlaybackStatusUpdate);
        }
    }

    componentDidMount() {
        ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.LANDSCAPE)
    }

    componentWillUnmount() {
        //playbackObject.dismissFullscreenPlayer();
        //this.props.navigation.goBack();
        ScreenOrientation.lockAsync(
            ScreenOrientation.OrientationLock.PORTRAIT_UP
        )
    }
    
    onFullscreenUpdate = ({ fullscreenUpdate, status }) => {
        console.log(fullscreenUpdate, status)
        switch (fullscreenUpdate) {
            case Video.FULLSCREEN_UPDATE_PLAYER_WILL_PRESENT:
                console.log(' the fullscreen player is about to present')
                break
            case Video.FULLSCREEN_UPDATE_PLAYER_DID_PRESENT:
                console.log('the fullscreen player just finished presenting')
                break
            case Video.FULLSCREEN_UPDATE_PLAYER_WILL_DISMISS:
                console.log('the fullscreen player is about to dismiss')
                break
            case Video.FULLSCREEN_UPDATE_PLAYER_DID_DISMISS:
                console.log('the fullscreen player just finished dismissing')
        }
    }
    
    render() {
        return (
            <SafeAreaView style={styles.container}>
                <Video
                    ref={this._handleVideoRef}
                    useNativeControls
                    rate={1.0}
                    resizeMode="contain"
                    onPlaybackStatusUpdate={(playbackStatus) =>
                        this.onPlaybackStatusUpdate(playbackStatus)
                    }
                    onFullscreenUpdate={this.onFullscreenUpdate}
                    style={{
                        width: this.windowHeight,
                        height: this.windowWidth,
                    }}
                />
            </SafeAreaView>
        )
    }
}

JS：

<v-select :items="items" label="Standard">
    <template v-slot:item="{ item }">
       <img :src="item.image">
       <span>{{ item.name }}</span>
    </template>
</v-select>

JSFiddle：https://codepen.io/reijnemans/pen/vYNadMo?editors=1010

Answer 2

您可以利用插槽将图像内容填充到select上。我已经使用https://emoji-css.afeld.me/来获取国家/地区的标志。

请参阅示例代码笔：https://codepen.io/aaha/pen/ZEbRwpy?editors=1011 我无法填写整个国家/地区列表。如果您可以填写并分享，那就太好了，我也可以在某个地方使用它。：D

<v-select
  v-model="select"
  :items="countries"
  label="Select"
  >
  <template v-slot:item="slotProps">
    <i :class="['mr-2', 'em', slotProps.item.flag]"></i>
      {{slotProps.item.name}}
    </template>
 </v-select>

data: {
    select: null,
    countries: [
      {
        name: "Andorra",
        flag: "em-flag-ad"
      },
      {
        name: "Arab Emirates",
        flag: "em-flag-ae"
      },
      {
        name: "Afghanistan",
        flag: "em-flag-af"
      },
      {
        name: "Antigua & Barbuda",
        flag: "em-flag-ag"
      },
      {
        name: "Albania",
        flag: "em-flag-al"
      },
      {
        name: "Anguilla",
        flag: "em-flag-ai"
      }
   ],
  }

Answer 3

我自己使用 <v-menu> 而不是 <v-select> 来实现组件，因此在 UI 方面它看起来像所需的模拟，没有 <v-select> 的所有 UI（如底部边框，箭头，标签等等...）

简介：我被要求创建一个下拉选择器以在语言之间切换。选择不同的国家/地区将导致使用相应的所选语言翻译网络应用

TL;DR：工作笔：https://codepen.io/narxx/pen/JjRxjrQ （抱歉添加了一些额外的样式，不知道为什么 Vuetify 的样式没有加载，而且看起来很糟糕。在我的项目中，它看起来很棒 - 我保证！:)）

模板：

<v-menu offset-y>
  <template v-slot:activator="{ on, attrs }">
    <img
      style="width: 32px"
      class="d-block"
      :src="getIcon()"
      v-bind="attrs"
      v-on="on"
    />
  </template>
  <v-list>
    <v-list-item
      v-for="(lang, index) in langs"
      :key="index"
      class="lang-menu-item"
    >
      <div class="d-flex align-center" @click="setLang(lang.value)">
        <img style="width: 32px"
              :src="lang.iconSrc"
              class="mr-2 d-block"/>
        <span>{{ lang.text }}</span>
      </div>
    </v-list-item>
  </v-list>
</v-menu>

对上面模板的一些解释：

使用 <v-menu> 组件允许我们手动创建我们自己的 html 作为激活元素，对于这个例子，我们希望显示一个国家的国旗作为激活元素。

在 <v-list> 中，我们将通过迭代语言列表手动创建下拉列表中的项目（在 langs 中 - 请参阅 JS 部分）。

JS：

data () {
  return {
    selectedLang: this.$i18n.locale,
    langs: [
      {
        value: 'en',
        text: 'English',
        iconSrc: require('../assets/flags/eng.svg')
      },
      {
        value: 'fr',
        text: 'French',
        iconSrc: require('../assets/flags/fr.svg')
      },
    ],
  }
},
computed: {
  getIcon () {
    return (item) => {
      let image = item || this.selectedLang
      let iconSrc = null
      Object.keys(this.langs).forEach( (index) => {
        if (this.langs[index].value === image) {
          iconSrc = this.langs[index].iconSrc
        }
      })
      return iconSrc
    }
  },
},
methods: {
  setLang(lang) {
    this.selectedLang = lang
    this.$i18n.locale = lang
  },
}

对上面代码的一些解释

selectedLang 是我们将在选择新语言时更改的反应变量。将默认为我们当前在 i18n 语言环境中拥有的任何内容。

langs：给定包含语言名称的对象列表（将在下拉列表中打印在屏幕上的文本），该值稍后将应用于 {{1 }} 元素来更改应用程序的区域设置，以及指向代表国家/地区的图像的链接。也可以是 svg 的 base64，或者标志字体的类名等等。

i18n：计算将采用语言值（代码如 getIcon 或 en..）并遍历 fr 中的所有语言并返回匹配的图像要显示在下拉列表和激活器元素中的给定值。

langs：从下拉列表中注册点击事件后更改语言的方法，触发此方法。当然，您将更改此方法以在项目中执行任何您想要的操作。

CSS (lang sass):

setLang

让列表看起来更漂亮一点。背景颜色是我在项目中用于整个应用程序默认背景的变量。

用图像Vuetify v-select

3 个答案: