douba2011 2019-04-27 23:56
浏览 159

如何在Smarty PHP中为Vue.js材质使用多个脚本标签

I'm attempting to use Vue.js for a project like making a theme for Mybb or Xenforo but I'm not sure how I'm going to get the scripts to work without it breaking or using inefficient methods to insert the code.

I also have issue with the text in the dialog flashing before Vue renders it but still flashes when I add v-cloak to app div (Optional because this is not important right now)

I'm using https://vuetifyjs.com/en/ since I can work CDN in my host but can't with packages.

I couldn't find any other resources that would help me or hint the slightest solution to my problem since I couldn't find someone who encountered this.

<!DOCTYPE html>
<html>

<head>
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>

<body>
    <div id="app" v-cloak>
        <v-app>
            <v-layout row justify-center>
                <v-btn color="primary" dark @click.stop="dialog = true">
                    Open Dialog
                </v-btn>

                <v-dialog v-model="dialog" max-width="290">
                    <v-card>
                        <v-card-title class="headline">Use Google's location service?</v-card-title>

                        <v-card-text>
                            Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.
                        </v-card-text>

                        <v-card-actions>
                            <v-spacer></v-spacer>

                            <v-btn color="green darken-1" flat="flat" @click="dialog = false">
                                Disagree
                            </v-btn>

                            <v-btn color="green darken-1" flat="flat" @click="dialog = false">
                                Agree
                            </v-btn>
                        </v-card-actions>
                    </v-card>
                </v-dialog>
            </v-layout>

            <v-card height="200px" flat>
                <div class="headline text-xs-center pa-5">
                    Active: {{ bottomNav }}
                </div>
                <v-bottom-nav :active.sync="bottomNav" :value="true" absolute color="transparent">
                    <v-btn color="teal" flat value="recent">
                        <span>Recent</span>
                        <v-icon>history</v-icon>
                    </v-btn>

                    <v-btn color="teal" flat value="favorites">
                        <span>Favorites</span>
                        <v-icon>favorite</v-icon>
                    </v-btn>

                    <v-btn color="teal" flat value="nearby">
                        <span>Nearby</span>
                        <v-icon>place</v-icon>
                    </v-btn>
                </v-bottom-nav>
            </v-card>
        </v-app>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    bottomNav: 'recent'
                }
            }
        })
    </script>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    dialog: false
                }
            }
        })
    </script>
</body>

</html>

I expected the dialog to show up and the tabs to work so I can put this in somewhere like Mybb and I can still get it to work.

  • 写回答

0条回答 默认 最新

    报告相同问题?

    悬赏问题

    • ¥15 MATLAB怎么通过柱坐标变换画开口是圆形的旋转抛物面?
    • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
    • ¥15 解riccati方程组
    • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
    • ¥30 用arduino开发esp32控制ps2手柄一直报错
    • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
    • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
    • ¥50 树莓派安卓APK系统签名
    • ¥65 汇编语言除法溢出问题
    • ¥15 Visual Studio问题