Heim > Web-Frontend > js-Tutorial > Was sind Vue-Listenkomponenten und Popup-Komponenten? Verwendung von Listenkomponenten und Popup-Komponenten (Codebeispiel)

Was sind Vue-Listenkomponenten und Popup-Komponenten? Verwendung von Listenkomponenten und Popup-Komponenten (Codebeispiel)

青灯夜游
Freigeben: 2018-10-24 17:27:07
nach vorne
2134 Leute haben es durchsucht

Der Inhalt dieses Artikels soll Ihnen vorstellen, was Vue-Listenkomponenten und Popup-Komponenten sind. Verwendung von Listenkomponenten und Popup-Komponenten (Codebeispiele). Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

  • Listenkomponente

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

<!DOCTYPE html>

<html>

 

<head>

    <meta charset="utf-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>Page Title</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

         

        li {

            list-style: none

        }

         

        body {

            height: 2000px;

            overflow: hidden;

        }

         

        .header {

            width: 100%;

            height: 40px;

            background: #e1e1e1;

            text-align: center;

            line-height: 40px;

            position: fixed;

        }

         

        .header button {

            padding: 0rem 0.2rem;

            height: 40px;

            top: 0;

        }

         

        .header button:nth-of-type(1) {

            position: fixed;

            left: 0;

        }

         

        .header button:nth-of-type(2) {

            position: fixed;

            right: 0;

        }

         

        .content {

            position: fixed;

            top: 40px;

            overflow: auto;

            width: 100%;

            height: 100%;

        }

         

        .content .user_list h3 {

            background: #eeeeee;

            padding-left: 0.5rem;

            height: 2rem;

            line-height: 2rem;

        }

         

        .content .user_list ul li {

            height: 2.5rem;

            line-height: 2.5rem;

            border-bottom: .01rem #e1e1e1 solid;

            padding-left: 0.5rem

        }

         

        .user_list span:nth-of-type(2) {

            float: right;

            padding-right: 1rem

        }

         

        .content .user_index {

            position: fixed;

            right: 0.6rem;

            top: 50%;

            font-size: 1rem;

        }

    </style>

</head>

 

<body>

    <div id="app">

        <custom-header :title="title">

            <button slot="left">返回</button>

        </custom-header>

        <custom-content :user-data="userData"></custom-content>

    </div>

 

    <template id="header">

        <div class="header">

            <slot name="left"></slot>

            <span>{{title}}</span>

            <slot name="right"></slot>

        </div>

    </template>

    <template id="list-content">

            <div class="content">

                    <ul class="user_list">

                        <li v-for="item in userData">

                            <h3>{{item.index}}</h3>

                            <ul>

                                <li v-for="user in item.users">

                                    <span>{{user.name}}</span>

                                    <span>{{user.tel}}</span>

                                </li>

                            </ul>

                        </li>

                    </ul>

                    <ul class="user_index" ref="user_index">

                        <li @click="setScroll" v-for="index in userIndex">{{index}}</li>

                    </ul>

                </div>

    </template>

 

    <script>

        // document.getElementById("").style.marginTop

        var userData = [{

            "index""A",

            "users": [{

                "name""a1",

                "tel""123453221122"

            }, {

                "name""a2",

                "tel""123453221122"

            }, {

                "name""a3",

                "tel""123453221122"

            }]

        }, {

            "index""B",

            "users": [{

                "name""b1",

                "tel""123453221122"

            }, {

                "name""b2",

                "tel""123453221122"

            }, {

                "name""b3",

                "tel""123453221122"

            }]

        }, {

            "index""C",

            "users": [{

                "name""c1",

                "tel""123453221122"

            }, {

                "name""c2",

                "tel""123453221122"

            }, {

                "name""c3",

                "tel""123453221122"

            }]

        }, {

            "index""D",

            "users": [{

                "name""d1",

                "tel""123453221122"

            }, {

                "name""d2",

                "tel""123453221122"

            }, {

                "name""d3",

                "tel""123453221122"

            }]

        }]

        Vue.component("custom-header", {

            template: '#header',

            props: ["title"]

        });

        Vue.component("custom-content", {

            template: "#list-content",

            props: ["userData"],

            computed: {

                userIndex: function() {

                    return this.filterIndex(this.userData);

                }

            },

            methods: {

                filterIndex: function(data) {

                    var result = [];

                    for (const i in data) {

                        if (data.hasOwnProperty(i)) {

                            const element = data[i];

                            result.push(element.index);

                        }

                    }

                    return result;

                },

                setListIndexPos: function() {

                    debugger

                    //获取索引元素

                    var element = this.$refs.user_index;

                    //获取offsetHight

                    var iH = element.offsetHeight;

                    element.style.marginTop = -iH / 2 + 'px';

                },

                setScroll: function() {

 

                }

            },

            mounted() {

                this.setListIndexPos();

            },

 

        });

        //多插槽的使用,则使用name属性来指定要插入的位置

        var vm = new Vue({

            el: '#app',

            data: {

                title: "通讯录",

                userData: userData

            },

            components: {

 

            }

        });

    </script>

 

</body>

 

</html>

Nach dem Login kopieren
  • Beispiel 1 der Pop-up-Komponente

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

<!DOCTYPE html>

<html>

 

<head>

    <meta charset="utf-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>Page Title</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

         

        li {

            list-style: none

        }

         

        body {

            height: 2000px;

            overflow: hidden;

        }

         

        .header {

            width: 100%;

            height: 40px;

            background: #e1e1e1;

            text-align: center;

            line-height: 40px;

            position: fixed;

        }

         

        .header button {

            padding: 0rem 0.2rem;

            height: 40px;

            top: 0;

        }

         

        .header button:nth-of-type(1) {

            position: fixed;

            left: 0;

        }

         

        .header button:nth-of-type(2) {

            position: fixed;

            right: 0;

        }

         

        .content {

            position: fixed;

            top: 40px;

            overflow: auto;

            width: 100%;

            height: 100%;

        }

         

        .content .user_list h3 {

            background: #eeeeee;

            padding-left: 0.5rem;

            height: 2rem;

            line-height: 2rem;

        }

         

        .content .user_list ul li {

            height: 2.5rem;

            line-height: 2.5rem;

            border-bottom: .01rem #e1e1e1 solid;

            padding-left: 0.5rem

        }

         

        .user_list span:nth-of-type(2) {

            float: right;

            padding-right: 1rem

        }

         

        .content .user_index {

            position: fixed;

            right: 0.6rem;

            top: 50%;

            font-size: 1rem;

        }

         

        .message {

            width: 100%;

            height: 100%;

            background: rgba(0, 0, 0, 5);

            position: fixed;

            left: 0;

            top: 0;

            z-index: 200;

            display: flex;

        }

         

        .message .message-main {

            width: 200px;

            height: 150px;

            background: white;

            border-radius: 0.15rem;

            margin: auto;

            position: relative;

        }

         

        .message .message-title {

            padding: 0.1rem;

            border-bottom: 0.01rem solid #ccc;

        }

         

        .message .message-content {

            height: 2.5rem;

            line-height: 2.5rem;

            text-align: center;

        }

         

        .message .message-btn {

            position: absolute;

            right: 0;

            bottom: 0;

        }

         

        .message .message-btn button {

            margin: 1rem;

            padding: 0.1rem;

        }

    </style>

</head>

 

<body>

    <div id="app">

        <custom-header :title="title">

            <button slot="left">返回</button>

        </custom-header>

        <custom-content :user-data="userData"></custom-content>

        <div class="message">

            <div class="message-main">

                <div class="message-title">xxxx</div>

                <div class="message-content">sssss</div>

                <div class="message-btn">

                    <button>确认</button>

                    <button>取消</button>

                </div>

            </div>

        </div>

    </div>

 

    <template id="header">

        <div class="header">

            <slot name="left"></slot>

            <span>{{title}}</span>

            <slot name="right"></slot>

        </div>

    </template>

    <template id="list-content">

            <div class="content">

                    <ul class="user_list">

                        <li v-for="item in userData">

                            <h3>{{item.index}}</h3>

                            <ul>

                                <li v-for="user in item.users">

                                    <span>{{user.name}}</span>

                                    <span>{{user.tel}}</span>

                                </li>

                            </ul>

                        </li>

                    </ul>

                    <ul class="user_index" ref="user_index">

                        <li @click="setScroll" v-for="index in userIndex">{{index}}</li>

                    </ul>

                </div>

    </template>

 

    <script>

        // document.getElementById("").style.marginTop

        var userData = [{

            "index""A",

            "users": [{

                "name""a1",

                "tel""123453221122"

            }, {

                "name""a2",

                "tel""123453221122"

            }, {

                "name""a3",

                "tel""123453221122"

            }]

        }, {

            "index""B",

            "users": [{

                "name""b1",

                "tel""123453221122"

            }, {

                "name""b2",

                "tel""123453221122"

            }, {

                "name""b3",

                "tel""123453221122"

            }]

        }, {

            "index""C",

            "users": [{

                "name""c1",

                "tel""123453221122"

            }, {

                "name""c2",

                "tel""123453221122"

            }, {

                "name""c3",

                "tel""123453221122"

            }]

        }, {

            "index""D",

            "users": [{

                "name""d1",

                "tel""123453221122"

            }, {

                "name""d2",

                "tel""123453221122"

            }, {

                "name""d3",

                "tel""123453221122"

            }]

        }]

        Vue.component("custom-header", {

            template: '#header',

            props: ["title"]

        });

        Vue.component("custom-content", {

            template: "#list-content",

            props: ["userData"],

            computed: {

                userIndex: function() {

                    return this.filterIndex(this.userData);

                }

            },

            methods: {

                filterIndex: function(data) {

                    var result = [];

                    for (const i in data) {

                        if (data.hasOwnProperty(i)) {

                            const element = data[i];

                            result.push(element.index);

                        }

                    }

                    return result;

                },

                setListIndexPos: function() {

                    debugger

                    //获取索引元素

                    var element = this.$refs.user_index;

                    //获取offsetHight

                    var iH = element.offsetHeight;

                    element.style.marginTop = -iH / 2 + 'px';

                },

                setScroll: function() {

 

                }

            },

            mounted() {

                this.setListIndexPos();

            },

 

        });

        //多插槽的使用,则使用name属性来指定要插入的位置

        var vm = new Vue({

            el: '#app',

            data: {

                title: "通讯录",

                userData: userData

            },

            components: {

 

            }

        });

    </script>

 

</body>

 

</html>

Nach dem Login kopieren
  • Beispiel 2 der Pop-up-Komponente

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

<!DOCTYPE html>

<html>

 

<head>

    <title></title>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script src="../../Script/vue/vue.js"></script>

    <style>

        /** 弹窗动画*/

         

        .drop-enter-active {

            /* 动画进入过程:0.5s */

            transition: all 0.5s ease;

        }

         

        .drop-leave-active {

            /* 动画离开过程:0.5s */

            transition: all 0.3s ease;

        }

         

        .drop-enter {

            /* 动画之前的位置 */

            transform: translateY(-500px);

        }

         

        .drop-leave-active {

            /* 动画之后的位置 */

            transform: translateY(-500px);

        }

        /* 最外层 设置position定位 */

         

        .message {

            position: relative;

            font-size: 1rem;

        }

        /* 遮罩 设置背景层,z-index值要足够大确保能覆盖,高度 宽度设置满 做到全屏遮罩 */

         

        .message-cover {

            position: fixed;

            z-index: 200;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            background: rgba(0, 0, 0, 0.5);

        }

        /* 内容层 z-index要比遮罩大,否则会被遮盖 */

         

        .message-content {

            position: fixed;

            top: 35%;

            display: flex;

            flex-direction: column;

            justify-content: center;

            align-items: center;

            z-index: 300;

        }

         

        .message-header {

            /*  头部title的背景 居中圆角等属性。

             没有图片就把background-image注释掉 */

            /* background-image: url("../../static/gulpMin/image/dialog/dialog_head.png"); */

            width: 86.5%;

            height: 43px;

            display: flex;

            justify-content: center;

            align-items: center;

            border-top-left-radius: 10px;

            border-top-right-radius: 10px;

        }

         

        .message-main {

            /* 主体内容样式设置 */

            background: #ffffff;

            display: flex;

            justify-content: center;

            align-content: center;

            width: 86.5%;

            padding: 22px 0 47px 0;

            border-bottom-left-radius: 10px;

            border-bottom-right-radius: 10px;

        }

         

        .message-foot-close {

            width: 45px;

            height: 45px;

            border-radius: 50%;

            background: #fcca03;

            display: flex;

            justify-content: center;

            align-content: center;

            margin-top: -25px;

        }

         

        .close_img {

            /* background-image: url("../../static/gulpMin/image/dialog/dialog_close.png"); */

            width: 42px;

            height: 42px;

        }

         

        .message-header div {

            background: #fcca03;

            width: 100%;

            height: 100%;

            text-align: center;

            line-height: 43px;

            padding: 0;

            margin: 0;

            display: flex;

            justify-content: center;

            align-items: center;

            align-content: center;

            border-top-left-radius: 0.5rem;

            border-top-right-radius: 0.5rem;

        }

    </style>

</head>

 

 

<body>

    <div id="app">

        <button @click="dialogContent">弹窗</button>

        <message-dialog :is-show="isShow" @on-close="close" v-show="isShow" :width="100">

            <div slot="header">{{message}}</div>

            <div slot="main">{{content}}</div>

        </message-dialog>

    </div>

 

    <!-- 消息弹出窗 -->

    <template id="message-dialog">

            <div>

                    <!--外层的遮罩 点击事件用来关闭弹窗,isShow控制弹窗显示 隐藏的props-->

                    <div class="message-cover back" v-if="isShow"></div>

                    <!-- transition 这里可以加一些简单的动画效果 -->

                    <transition name="drop">

                        <div :style="{width:width+&#39;%&#39;,top:topDistance+&#39;%&#39;}" v-if="isShow">

                            <!--弹窗头部 title-->

                            <div>

                                <slot name="header"></slot>

                            </div>

                            <!--弹窗的内容-->

                            <div :style="{paddingTop:padingTop+&#39;px&#39;,paddingBottom:padingBottom+&#39;px&#39;}">

                                    <slot name="main"></slot>

                            </div>

                            <!--弹窗关闭按钮-->

                            <div @click="close">

                                <div class="message-close-img back" ></div>

                            </div>

                        </div>

                    </transition>

                </div>

    </template>

    <script>

        Vue.component("message-dialog", {

            template: "#message-dialog",

            props: {

                isShow: {

                    type: Boolean,

                    required: true,

                    default: false,

                },

                width: {

                    type: Number,

                    default: 86.5

                },

                topDistance: {

                    type: Number,

                    default: 35

                },

                padingTop: {

                    type: Number,

                    default: 22

                },

                padingBottom: {

                    type: Number,

                    default: 47

                }

            },

            methods: {

                close: function() {

                    this.$emit('on-close');

                }

            }

        });

 

        var vm = new Vue({

            el: '#app',

            data: {

                isShow: false,

                message: "提示信息",

                content: "内容"

            },

            methods: {

                dialogContent: function() {

                    this.isShow = !this.isShow;

                },

                close: function() {

                    this.isShow = false;

                }

            }

        });

    </script>

</body>

 

</html>

Nach dem Login kopieren
  • Beispiel drei der Popup-Komponente

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

<!DOCTYPE html>

<html>

 

<head>

    <title></title>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script src="../../Script/vue/vue.js"></script>

    <link rel="stylesheet" href="message-dialog.1.css">

    <script src="message-dialog.js"></script>

</head>

 

 

<body>

    <div id="app">

        <button @click="dialogContent">弹窗</button>

        <message-dialog :width="99" :is-show="isShow" v-show="isShow">

            <div slot="message_header">{{message}}</div>

            <div slot="message_content">{{content}}</div>

            <!-- <div slot="message_btn">

                <button type="button" @click="sure">确定</button>

                <button type="button" @click="cancel">取消</button>

            </div> -->

            <div slot="message_close" @click="cancel">×</div>

        </message-dialog>

    </div>

 

    <script>

        var vm = new Vue({

            el: '#app',

            data: {

                isShow: false,

                message: "提示信息",

                content: "内容"

            },

            methods: {

                dialogContent: function() {

                    this.isShow = !this.isShow;

                },

                close: function() {

                    this.isShow = false;

                },

                sure: function() {

                    alert(1234);

                    this.isShow = !this.isShow;

                },

                cancel: function() {

                    this.isShow = !this.isShow;

                }

            }

        });

    </script>

</body>

 

</html>

Nach dem Login kopieren

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

/** 弹窗动画*/

 

.drop-enter-active {

    /* 动画进入过程:0.5s */

    transition: all 0.5s ease;

}

 

.drop-leave-active {

    /* 动画离开过程:0.5s */

    transition: all 0.3s ease;

}

 

.drop-enter {

    /* 动画之前的位置 */

    transform: translateY(-500px);

}

 

.drop-leave-active {

    /* 动画之后的位置 */

    transform: translateY(-500px);

}

 

 

/* 最外层 设置position定位 */

 

.message-dialog {

    position: relative;

    font-size: 1rem;

}

 

 

/* 遮罩 设置背景层,z-index值要足够大确保能覆盖,高度 宽度设置满 做到全屏遮罩 */

 

.message-dialog-cover {

    position: fixed;

    z-index: 200;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.5);

}

 

 

/* 内容层 z-index要比遮罩大,否则会被遮盖 */

 

.message-dialog-content {

    position: fixed;

    top: 35%;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    z-index: 300;

    left: 0;

    right: 0;

}

 

.message-dialog-header {

    /*  头部title的背景 居中圆角等属性。

     没有图片就把background-image注释掉 */

    /* background-image: url("../../static/gulpMin/image/dialog/dialog_head.png"); */

    width: 86.5%;

    height: 43px;

    display: flex;

    justify-content: center;

    align-items: center;

    align-content: center;

    text-align: center;

    border-top-left-radius: 10px;

    border-top-right-radius: 10px;

    background: #fcca03;

}

 

.message-dialog-main {

    /* 主体内容样式设置 */

    background: #ffffff;

    display: flex;

    justify-content: center;

    align-content: center;

    align-items: center;

    text-align: center;

    width: 86.5%;

    padding: 22px 0 47px 0;

    border-bottom-left-radius: 10px;

    border-bottom-right-radius: 10px;

}

 

.message-dialog-footer {

    width: 86.5%;

    height: 45px;

    display: flex;

    justify-content: center;

    align-content: center;

    text-align: center;

    align-items: center;

}

 

.message-dialog-close-img {

    /* background-image: url("../../static/gulpMin/image/dialog/dialog_close.png"); */

    width: 45px;

    height: 45px;

    line-height: 45px;

    border-radius: 50%;

    background: #fcca03;

    margin-top: -45px;

}

 

.message-dialog-btn {

    width: 100%;

    height: 100%;

    top: -8px;

    background: #fcca03;

    position: relative;

    line-height: 45px;

    display: flex;

    justify-content: center;

    text-align: center;

    align-items: center;

    align-content: center;

    border-bottom-left-radius: 10px;

    border-bottom-right-radius: 10px;

}

 

.message-dialog-btn button {

    border-radius: 0.2rem;

    background: linear-gradient(to bottom, #4eb5e5 0%, #389ed5 100%);

    box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, .2);

    text-shadow: 1px 1px 1px rgba(0, 0, 0, .4);

    color: #fbfbfb;

    font-weight: bold;

    font-family: 'Open Sans', sans-serif;

    font-size: 1rem;

    cursor: pointer;

    border: none;

    margin: 10px;

    height: 30px;

    line-height: 30px;

}

 

button:active {

    box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, .2);

    top: 1px;

}

 

button:after {

    content: "";

    width: 0;

    height: 0;

    display: block;

    position: absolute;

    opacity: 0.6;

    right: 0;

    top: 0;

    border-radius: 0 5px 5px 0;

}

Nach dem Login kopieren

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

Vue.component("message-dialog", {

    template: `<div class="message-dialog">

                <!-- 遮罩 -->

                <div class="message-dialog-cover"></div>

                <transition name="drop">

                    <div class="message-dialog-content" v-bind:style="{width:width+&#39;%&#39;,top:topDistance+&#39;%&#39;}" v-if="isShow">

                        <div class="message-dialog-header">

                             <!-- 使用插槽 -->

                            <slot name="message_header"></slot>

                        </div>

                        <div class="message-dialog-main">

                        <slot name="message_content"></slot>

                        </div>

                        <div class="message-dialog-footer">

                        <slot name="message_btn"></slot>

                        <slot name="message_close"></slot>

                        <!-- <div class="message-dialog-btn">

                                 <button type="button">确定</button>

                                 <button type="button">取消</button>

                             </div>

                         <div class="message-dialog-close-img">×</div> -->

                        </div>

                    </div>

                </transition>

            </div>`,

    data: function() { return {}; },

    props: {

        width: {

            type: Number,

            default: 86.5

        },

        topDistance: {

            type: Number,

            default: 35

        },

        isShow: {

            type: Boolean,

            default: false

        }

    },

    methods: {

 

    },

}

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWas sind Vue-Listenkomponenten und Popup-Komponenten? Verwendung von Listenkomponenten und Popup-Komponenten (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:cnblogs.com
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage